如何提高webpack性能？

我最近從browserify切換到了webpack，構建時間從（2014 MBP）從4秒跳到16秒。我知道webpack確實比browserify更多，但我不應該這麼長時間。我的構建過程非常簡單。有任何提示或選項可以提高我的構建時間嗎？如何提高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) 
    }); 
});

來源

2014-12-10 dpham

通過gulp和webpack使用webpack有什麼區別嗎？只是好奇:) – 2014-12-11 02:55:42

您可以使用大文件，如jQuery和角度的noParse選項。

例子在這裏：https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60

此外，如果你設置cache爲true，看時重建一個快了很多。

提高速度的另一種方法是將不會編輯的大型依賴項放入單獨的包中。

來源

2014-12-18 11:09:30

我喜歡把大的依賴放在一個單獨的包（例如jquery或angular）中。但是，如何需要（'jquery'）並在主應用程序包中使用它？ – Aman 2015-11-21 15:06:38

只要確保兩個包都包含在您的HTML中，它應該工作 – 2015-11-22 07:51:12

默認情況下，緩存設置爲true以供觀看。 – Swordfish0321 2016-01-29 23:41:36

您應該爲您的裝載機設置include路徑。例如：

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

考慮對該css情況做同樣的事情。

根據我的經驗，這可以帶來巨大的收益，因爲它不必穿越node_modules了。或者你可以excludenode_modules，但我覺得它只需要設置include。但是，如果您要求內容不在包含路徑中，則會變得更加複雜。

Docs for include/exclude

來源

2015-04-23 06:25:12

browserify不會將轉換應用於'node_modules'，這就是爲什麼它更快（開箱即用）的原因 – timaschew 2015-06-21 14:24:18

@timaschew是的，這有效地解釋了它。使用webpack'include'是一個非常好的主意。 – 2015-06-21 16:52:47

謝謝你對我造成了巨大的影響。 – 2015-11-06 18:45:23

最近一個新的模塊加載，HappyPack（不是我寫的），大量使用並行化和磁盤緩存來提高對大型代碼庫的構建時間相當顯著。在我的代碼庫上編譯時間從40秒變爲10.但它仍然是一個非常新的庫，所以它沒有非常好的記錄或用戶友好性。值得一看，但。

來源

2016-02-08 23:12:25 Scottmas

在我的情況下，happyloader不幸地沒有幫助，hovewer devtool：'eval-source-map'，有一點幫助。 – 2016-10-13 12:41:02

如何提高webpack性能？

回答

相關問題