Javascript browsersync的加载时间较慢
我正在开发一个中型的React应用程序。我有一个吞咽任务,看起来像这样:Javascript browsersync的加载时间较慢,javascript,performance,reactjs,gulp,Javascript,Performance,Reactjs,Gulp,我正在开发一个中型的React应用程序。我有一个吞咽任务,看起来像这样: gulp.task('js', function() { browserify(paths.jsx) .transform(babelify,{presets: ["es2015", "react"]}) .bundle().on('error', $.notify.onError({ title: "JSX Error", message: "<%=
gulp.task('js', function() {
browserify(paths.jsx)
.transform(babelify,{presets: ["es2015", "react"]})
.bundle().on('error', $.notify.onError({
title: "JSX Error",
message: "<%= error.message %>"
}))
.pipe(source('app.min.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('app/components'));
});
gulp.task('default', ['styles', 'js','bs-client'], () => {
gulp.watch('app/**/*.jsx',['js']);
gulp.watch('app/components/app.min.js', reload);
gulp.watch(paths.srcCSS + '**/*.scss', ['styles']);
});
编译对JS的更改非常快:
[21:24:05] Starting 'js'...
[21:24:05] Finished 'js' after 6.01 ms
但浏览器同步似乎需要7-10秒的时间才能注意到更改并重新加载页面。如果我在JS任务完成后和浏览器同步重新加载触发之前手动转到浏览器并刷新,我看不到任何更改生效(例如添加到console.log),因此我假设需要在幕后进行某种中间“步骤”
为什么浏览器同步需要很长时间才能注意到JS任务已经完成并重新加载浏览器?有什么方法可以加快速度吗?浏览器同步必须等待以下操作:
- 正在写入文件系统的文件
- 查找文件中的差异
- 创建源地图和缩小文件
- SASS文件的编译
- 最少步骤(复制文件、创建脚本标记)
- 特定于环境的步骤(源地图、缩小)