Code Splitting 代碼分離

發現問題

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

查找緣由

爲何 vendor 體積這麼大？

藉助 Webpack 的分析工具，看了下各個依賴的體積分佈

看起來是 Highcharts 和 Element-UI 佔了較大致積，那就想辦法優化唄

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

解決方法

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
})

拆包後的打包結果

看看分析工具

總結

外鏈簡單粗暴，而拆包能夠配合瀏覽器緩存，每次發佈最小化更新資源