webpack優(yōu)化
0、調(diào)試
webpack --config file --colors --profile --display-modules
--colors 輸出結(jié)果帶彩色，比如：會(huì)用紅色顯示耗時(shí)較長(zhǎng)的步驟
--profile 輸出性能數(shù)據(jù)，可以看到每一步的耗時(shí)
--display-modules 默認(rèn)情況下 node_modules 下的模塊會(huì)被隱藏，加上這個(gè)參數(shù)可以顯示這些被隱藏的模塊
1、添加 alise
主要是 node_modules 部分。 可以加快查詢速度。 （感覺(jué)無(wú)所謂）
2、避免比不要的babel
對(duì)于很多的 npm 包來(lái)說(shuō)，他們完全沒(méi)有經(jīng)過(guò) babel 的必要（成熟的 npm 包會(huì)在發(fā)布前將自己 es5，甚至 es3 化），讓這些包通過(guò) babel 會(huì)帶來(lái)巨大的性能負(fù)擔(dān)，畢竟 babel6 要經(jīng)過(guò)幾十個(gè)插件的處理，雖然 babel-loader 強(qiáng)大，但能者多勞的這種保守的想法卻使得 babel-loader 成為了整個(gè)構(gòu)建的性能瓶頸。所以我們可以使用 exclude，大膽地屏蔽掉 npm 里的包，從而使整包的構(gòu)建效率飛速提高。
loaders: [{
test: /\.js[x]?$/,
exclude: /(node_modules)|(global\/lib\/)/,
loader: 'babel-loader'
},
3、 DllReferencePlugin
對(duì)于jquery，react這種第三方庫(kù)重復(fù)編譯會(huì)造成時(shí)間上的浪費(fèi)。
所以我們把這些文件打包成 lib.js 文件 插件命名參考c++。 dll代表用來(lái)被引用的文件。
1、 創(chuàng)建一個(gè) webpack.dll.conf.js
var vendors = [
'jquery',
'underscore',
'react',
'react-dom',
];
module.exports = {
output: {
path: path.resolve(process.cwd(),'build/lib/'),
filename: '[name].js',
library: '[name]',
},
entry: {
"lib": vendors,
},
resolve: {
alias: ...
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(process.cwd(),'build/lib/manifest.json'),
name: '[name]',
context: __dirname,
}),
],
};
我們把vendors中的文件打包為一個(gè) lib.js
加入了 webpack.DllPlugin 插件
output 中增加了 library
運(yùn)行后會(huì)在lib目錄 生成一個(gè) lib.js 和 manifest.json
lib.js 是編譯后的文件
manifest.json是用來(lái)告訴項(xiàng)目的 webpack 相關(guān)模塊對(duì)應(yīng)lib.js。
在webpack.conf.js中增加
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./lib/manifest.json')
}),
完成后先編譯一次dll 再 執(zhí)行 項(xiàng)目編譯。dll文件編譯一次后除非變更否則不需要再編譯。
頁(yè)面中
<script src="./lib.js"></script> //先引入lib.js 或者 把兩者合并
<script src="./common.js"></script>
對(duì)項(xiàng)目中的 common.js dll前后 做了一次對(duì)比
dll前 186秒
dll后 92秒
4、HappyPack
https://github.com/amireh/happypack
總結(jié)
dll 和 HappyPack的方案對(duì)速度有明顯的提高。
