Webpack打包優化：使用外鏈與拆包模式

1、發現問題

這是一個基於 vue-cli 的管理後臺項目，因爲依賴較多，打包結果以下

2、查找緣由

爲何 vendor 體積這麼大？

引用的庫太多時，vendor的體積會很大，藉助 Webpack 的分析工具，看了下各個依賴的體積分佈

找到緣由，是 Highcharts 和 Element-UI佔了較大致積，致使性能減弱。

這兩個庫都提供了按需加載的功能，能有效減少體積，只是恰好這個管理後臺項目依賴較多

那麼有辦法控制打包的體積超過必定值時，分紅多個文件打包嗎？
或者經過配置將部分庫抽離出來，打包成另外的文件？

3、解決方法

（一）CDN 外鏈

先把 Highcharts 和 Lodash 經過外鏈引入

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highstock.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/highcharts-more.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/modules/treemap.js" />

外鏈引入的資源就不能直接經過 import 來使用，但能夠經過 Webpack 的 externals 特性來兼容

import _ from 'lodash'
import Highcharts from 'highcharts'

console.log([_, Highcharts])

這樣配置 Webpack 就知道這兩個依賴是外鏈全局的，不須要打包

externals: {
  lodash: '_',
  highcharts: 'Highcharts'
}

先看看去掉 Highcharts 和 Lodash 的效果

vendor 也避免打包了這兩個庫

這種方式適用於不常更新的第三方依賴，採用外鏈，Element-UI 因爲常有新特性更新，須要保持最新版本，因此仍是經過 npm 來管理

內網部署的問題

如若這個管理後臺項目要部署到一個內網機器，訪問不了外網，那要怎麼解決呢？

（二）拆開 vendor

Webpack 默認是將依賴打包成一個文件，這樣優勢是減小資源請求數，但當依賴增多，體積增大，一個資源的加載速度就會減慢

因此嘗試去拆包

new webpack.optimize.CommonsChunkPlugin({
  name: 'charts',
  chunks: ['vendor'],
  minChunks: module => module.resource.indexOf('highcharts') > -1
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'utils',
  chunks: ['vendor'],
  minChunks: module => module.resource.indexOf('lodash') > -1
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'ui',
  chunks: ['vendor'],
  minChunks: module => module.resource.indexOf('element-ui') > -1
})

拆包後的打包結果

看看分析工具

總結

程序小哥實戰經驗得出：外鏈簡單粗暴，而拆包能夠配合瀏覽器緩存，在每次發佈最小化更新資源，比較實用。

程序小哥介紹

考拉前端開發小哥Bingo，潛心鑽研小程序開發。