如何提高Webpack的性能？

Question

我最近从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)
    });
});

- dpham

---

通过 gulp 和直接使用 webpack，有什么区别吗？只是好奇 :) - Nick Tomlin

Answer 1

你应该为你的加载器设置include路径。例如：

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

考虑为该CSS案例做同样的操作。

根据我的经验，这样可以带来巨大的收益，因为它不再需要遍历 node_modules。或者您可以排除node_modules，但我觉得设置那个包含更加整洁。如果您需要从包含路径中获取内容，则会变得更加复杂。

include/exclude文档

- Juho Vepsäläinen

---

browserify 不会将转换应用于 node_modules，这就是为什么它（开箱即用）更快的原因。 - timaschew

@timaschew 是的，这样解释得很清楚了。使用webpack时，include是一个非常好的想法。 - Juho Vepsäläinen

谢谢你对我产生了巨大的影响。 - Dustin Getz

Answer 2

您可以使用noParse选项处理大文件，例如jquery和angular。

示例： https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60 此外，如果将cache设置为true，则在重新构建时可以更快地进行监视。

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

- Jeff Ling

---

我喜欢将大型依赖项放在单独的捆绑包中（例如jquery或angular）的想法。但是，如何在主应用程序捆绑包中使用require（'jquery'）？ - Aman

请确保两个捆绑包都包含在您的html中，它就可以正常工作。 - Jeff Ling

默认情况下，观察时缓存设置为true。 - Scott Sword

Answer 3

最近出现了一个新的模块加载器HappyPack（不是我写的），它大量使用并行处理和磁盘缓存，显著提高了大型代码库的构建时间。我的代码库编译时间从40秒降至10秒。但这个库还比较新，文档和用户友好性都不太完善。不过值得一看。

- Scottmas

---

在我的情况下，不幸的是happyloader没有帮助，然而devtool: 'eval-source-map'有一点帮助。 - Vlado Pandžić