如何提高 webpack 的性能？答案

【问题标题】：How to improve webpack performance?如何提高 webpack 的性能？
【发布时间】：2014-12-10 23:02:40
【问题描述】：

我最近从 browserify 切换到 webpack，构建时间从 4 秒跃升至 16 秒（2014 MBP）。我知道 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)
    });
});

【问题讨论】：

通过 gulp 和 webpack 使用 webpack 有区别吗？只是好奇:)

标签： javascript gulp reactjs browserify webpack

【解决方案1】：

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

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

考虑对那个 css 案例做同样的事情。

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

Docs for include/exclude

【讨论】：

browserify 没有对node_modules 应用转换，这就是它更快（开箱即用）的原因
@timaschew 是的，这有效地解释了它。用 webpack include 是一个非常好的主意。
谢谢你为我带来了巨大的改变。

【解决方案2】：

您可以将noParse 选项用于大文件，例如 jquery 和 angular。

此处的示例：https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60

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

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

【讨论】：

我喜欢将大依赖项放在单独的包中（例如 jquery 或 angular）的想法。但是，如何 require('jquery') 并在主应用程序包中使用它？
只要确保这两个包都包含在您的 html 中并且它应该可以工作
Caching 默认设置为 true 以便观看。

【解决方案3】：

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

【讨论】：

在我的情况下，happyloader 很遗憾没有帮助，但是 devtool: 'eval-source-map' 帮助了一点。