Question

我正在开发一款中型React应用。我有一个看起来像这样的gulp任务：

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任务已经完成并重新加载浏览器？有什么办法可以加快速度吗？

Answer 1

浏览器同步必须等待以下事项：

正在写入文件系统的文件
查找文件中的差异
创建源图和缩小文件
SASS文件的编译

为了加快流程，请将以下内容分开：

最小步骤（复制文件，创建脚本标签）
环境特定步骤（源图，缩小）

进入单独的命名空间以优化开发。

<强>参考

使用browsersync加载时间较慢

1 个答案: