如何提高webpack的性能？

Question

我最近从browserify切换到webpack,构建时间从4s跃升到16s(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,则在观看时会更快地重建.

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