24

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

3 回答 3

24

您应该include为您的装载机设置路径。例子:

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

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

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

包含/排除的文档

于 2015-04-23T06:25:12.987 回答
9

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

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

此外,如果您设置cache为 true,则在观看时重建速度会更快

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

于 2014-12-18T11:09:30.513 回答
1

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

于 2016-02-08T23:12:25.120 回答