javascript 如何提高 webpack 性能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27412475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to improve webpack performance?
提问by dpham
I recently switched from browserify to webpack and the build time jumped from 4s to 16s on (2014 MBP). I understand webpack does alot more than browserify but i shouldn't take that long. My build process is fairly simple. Are there any tips or options to improve my build time?
我最近从 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)
});
});
回答by Juho Veps?l?inen
You should set includepaths for your loaders. Example:
您应该include为加载程序设置路径。例子：
{ test: /\.js$/, loader: 'jsx-loader', include: jsSrcPath }
Consider doing the same for that css case.
考虑对那个 css 案例做同样的事情。
In my experience this can give massive gains as it doesn't have to traverse through node_modulesanymore. Alternatively you could excludenode_modulesbut I find it neater just to set up that include. It gets more complicated if you are requiring content out of the include path, though.
根据我的经验，这可以带来巨大的收益，因为它不再需要遍历node_modules。或者你也可以，excludenode_modules但我发现设置它更简洁include。但是，如果您需要包含路径之外的内容，它会变得更加复杂。
回答by Jeff Ling
You can use the noParseoption for big files, like jquery and angular.
您可以将该noParse选项用于大文件，例如 jquery 和 angular。
Examples here: https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60
这里的例子：https: //github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60
Also, if you set cacheto true, when watching it rebuilds a lot faster.
此外，如果您设置cache为 true，则在观看时它会更快地重建。
Another technique to increasing speed is to put big dependencies that you aren't going to edit into a separate bundle.
另一种提高速度的技术是将您不打算编辑的大依赖项放入单独的包中。
回答by Scottmas
Recently a new module loader, HappyPack(not written by me), makes heavy use of parallelization and disk caching to improve build times on large code bases pretty significantly. Compile times on my code base went from 40 seconds to 10. It's still a pretty new library though, so it's not extremely well documented or user friendly. Worth taking a look at though.
最近一个新的模块加载器，HappyPack（不是我写的），大量使用并行化和磁盘缓存来显着改善大型代码库的构建时间。我的代码库的编译时间从 40 秒缩短到 10 秒。不过它仍然是一个相当新的库，所以它的文档和用户友好度都不是很高。不过值得一看。
