如何提高 webpack 性能

Question

我最近从browserify切换到webpack，构建时间从4秒跳到16秒（2014 MBP）。 我知道 webpack 比浏览器化做得更多，但我不应该花那么长时间。我的构建过程相当简单。是否有任何提示或选项可以缩短我的构建时间？

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

Answer 1

您应该为加载程序设置include路径。例：

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

考虑对 css 情况执行相同的操作。

根据我的经验，这可以带来巨大的收益，因为它不再需要遍历node_modules。或者你可以exclude node_modules，但我发现设置那个include更整洁。但是，如果您需要包含路径之外的内容，则会变得更加复杂。

包含/排除的文档

Answer 2

你可以对大文件使用 noParse 选项，比如 jquery 和 angular。

这里的例子：https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60

此外，如果将cache设置为 true，则在观看时重建速度会快得多。

提高速度的另一种技术是将您不打算编辑的大依赖项放入单独的捆绑包中。

Answer 3

最近，一个新的模块加载器HappyPack（不是我编写的）大量使用并行化和磁盘缓存来显着改善大型代码库的构建时间。我的代码库的编译时间从 40 秒增加到 10 秒。不过，它仍然是一个相当新的库，因此它的文档或用户友好性不是很好。不过值得一看。