2017-02-15 3 views
0

私は中規模のReactアプリケーションを開発中です。ブラウザ同期の遅い読み込み時間

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')); 
}); 

とこのようになります時計のタスク:JSへの変更をコンパイル

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']); 
}); 

は非常に速いです:

[21:24:05] Starting 'js'... 
[21:24:05] Finished 'js' after 6.01 ms 

しかし、ブラウザ、私はこのようになりますゴクゴクタスクを持っています同期は変更を認識してページをリロードする前に、7〜10秒の間にかかるように見えます。私は手動でブラウザに行って、JSタスクが終了してブラウザの同期リロードがトリガされる前にリフレッシュすると、変更内容が反映されません(たとえばconsole.logに追加するなど)。舞台裏で起こる必要のある中間的な「ステップ」があると仮定します。

JSのタスクが完了し、ブラウザをリロードするのに気を付けるのに、ブラウザの同期に時間がかかるのはなぜですか?私はそれをスピードアップできる方法はありますか?

答えて

0

ブラウザの同期には、以下の事柄を待つ必要があります。

  • ファイルはSASSのファイルシステム
  • ファイル内の相違点を見つける
  • sourcemapsの作成と縮小さファイル
  • コンパイルに書き込まれていますファイル

処理を高速化するには、次のように区切ります。

  • 最小限の手順では、開発のために最適化する
  • 環境固有の手順(sourcemaps、縮小)別の名前空間の中へ

(スクリプトタグを作成し、ファイルをコピーします)。

参照

関連する問題