前端的打包工具從之前的browserify、grunt、gulp到現(xiàn)如今的rollup、webpack，涌現(xiàn)出了很多優(yōu)秀的打包工具，而目前最火的無(wú)疑是webpack，無(wú)論是當(dāng)前熱門的框架還是工具庫(kù)很多都選擇了它作為打包工具，因此在開發(fā)中webpack作為打包工具是一個(gè)很好的選擇。在最近的項(xiàng)目開發(fā)中我也用到了webpack，其中也碰到了不少優(yōu)化方面的問(wèn)題，這里總結(jié)一下webpack打包優(yōu)化的一些細(xì)節(jié)和方法。
首先，這次項(xiàng)目用到的是vue的全家桶，在webpack的配置方面直接用的是 vue-cli 生成的默認(rèn)配置，項(xiàng)目打包完成后發(fā)現(xiàn)生成的 vendor.js 文件體積特別大，其次打包過(guò)程相當(dāng)緩慢，因此想嘗試各種方式對(duì)其進(jìn)行優(yōu)化。
定位體積大的模塊
要想對(duì)打包體積進(jìn)行優(yōu)化，首先得找到體積大的模塊，在這里我們可以使用webpack插件 webpack-bundle-analyzer 來(lái)查看整個(gè)項(xiàng)目的體積結(jié)構(gòu)對(duì)比，它是以treemap的形式展現(xiàn)出來(lái)，很形象直觀，還有一些具體的交互形式。既可以查看你項(xiàng)目中用到的所有依賴，也可以直觀看到各個(gè)模塊體積在整個(gè)項(xiàng)目中的占比。
該插件的使用方法可以直接通過(guò) npm install webpack-bundle-analyzer --save-dev 安裝，并在webpack的配置信息中的 plugins: [new BundleAnalyzerPlugin()] 中添加即可。對(duì)于 vue-cli 中的配置方式，默認(rèn)是安裝了該插件，但是沒(méi)有啟用，找到 config/index.js 文件在 build 下面會(huì)有 bundleAnalyzerReport 的配置，默認(rèn)是 process.env.npm_config_report ，這里建議在 package.json 的 scripts 中添加一行 "analyz": "npm_config_report=true npm run build" ，這樣每次想啟用該插件時(shí)只需要 npm run analyze 即可。
提取公共模塊
對(duì)于webpack，它在模塊化打包上有兩點(diǎn)是其核心功能，一是它支持大量的模塊類型，無(wú)論是 TypeScript 、 CoffeeScript 還是 sass 、 stylus 等語(yǔ)言它都支持，二是它可以通過(guò)配置來(lái)控制打包文件的粒度，這個(gè)下面會(huì)講到。
在開發(fā)中我們往往會(huì)將所有的依賴庫(kù)單獨(dú)提取出來(lái)，而不與我們的項(xiàng)目代碼混在一起，這時(shí)我們會(huì)用到一個(gè)webpack自帶的插件 CommonsChunkPlugin ，從名字上就可以看出它是一個(gè)提取公共模塊的插件。從它的文檔中可以看出可以傳入一個(gè)對(duì)象最為參數(shù)，在使用中常用的三個(gè)參數(shù)分別為：
name 好理解，指的就是最后打包文件的名字，而如果使用的是 names 的話，傳入的必須是一個(gè)字符串?dāng)?shù)組。 minChunks 如果傳入的是一個(gè)數(shù)字的話，指的是如果該模塊被其他模塊的引用次數(shù)達(dá)到了這個(gè)數(shù)值的話該模塊就會(huì)被打包。如果傳入的是一個(gè)函數(shù)的話，其返回值必須是布爾類型來(lái)指明這個(gè)模塊是否應(yīng)該被打包進(jìn)公共模塊。而 chunks 則會(huì)指定一個(gè)字符串?dāng)?shù)組，如果設(shè)置了該參數(shù)，則打包的時(shí)候只會(huì)從其中指定的模塊中提取公共子模塊。
下面通過(guò)幾個(gè)實(shí)例來(lái)說(shuō)明這個(gè)插件是如何工作的。
假設(shè)有兩個(gè)模塊 chunk1.js 和 chunk2.js 以及兩個(gè)項(xiàng)目文件 a.js 和 b.js ，結(jié)構(gòu)大致如下：
重慶分公司
重慶分公司
// a.js
require('./chunk1');
require('./chunk2');
require('jquery');
// b.js
require('./chunk1');
require('./chunk2');
require('vue');
// webpack配置如下
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"],
vue:["vue"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: ["common","jquery","vue","load"],
minChunks:2
})
] };
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
