web-dev-qa-db-ja.com

Webpackのパフォーマンスを改善する方法は？

私は最近browserifyからwebpackに切り替えましたが、ビルド時間は（2014 MBP）で4秒から16秒に跳ね上がりました。 webpackはbrowserifyよりも多くのことを行うことを理解していますが、それほど長くはかからないはずです。私のビルドプロセスはかなり単純です。ビルド時間を改善するためのヒントやオプションはありますか？

var webpackOptions = {
  cache : true,
  output: {
    filename: '[name].js',
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'jsx-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
};


gulp.task('buildJs', function(){ 
    multipipe(
      gulp.src(jsSrcPath),
      named(),
      webpack(webpackOptions),
      uglify(),
      gulp.dest(jsDestPath)
    ).on('error', function(error){
      console.log(error)
    });
});
javascriptgulpreactjsbrowserifywebpack
24
dpham

ローダーのincludeパスを設定する必要があります。例：

{ test: /\.js$/, loader: 'jsx-loader', include: jsSrcPath }

そのCSSの場合にも同じことを行うことを検討してください。

私の経験では、node_modulesもう。または、excludenode_modulesでも、includeをセットアップするだけでいいと思う。ただし、インクルードパス外のコンテンツが必要な場合はさらに複雑になります。

包含/除外のドキュメント

24
Juho Vepsäläinen

noParseオプションは、jqueryやangularなどの大きなファイルに使用できます。

ここの例： https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L6

また、cacheをtrueに設定すると、それを見るときにlotがより速く再構築されます。

速度を上げるもう1つの方法は、編集しない大きな依存関係を別のバンドルに入れることです。

9
Jeff Ling

最近、新しいモジュールローダー HappyPack （私は作成していません）は、並列化とディスクキャッシュを多用して、大きなコードベースでのビルド時間を大幅に改善します。私のコードベースでのコンパイル時間は40秒から10秒になりました。しかし、それはまだかなり新しいライブラリであるため、非常によく文書化されておらず、ユーザーフレンドリーでもありません。しかし、見てみる価値があります。

1
Scottmas