為了方便開發后台管理系統，所以選擇了 vue 中比較火的后台模板 作為基礎模板進行開發。但是，開始用的時候，並沒有對此進行優化，到項目上線的時候，才發現，打包出來的文件都十分之大，就一個 vendor 就有 770k 的體積（下圖是基礎模板，什么都沒加打包后的文件信息）：
通過 webpack-bundle-analyzer 進行分析可得，體積主要來源於餓了么UI（體積為 500k），因為沒對其進行部分引入拆分組件，導致 webpack 把整個組件庫都打包進去了。其次就是 vue 本身，體積也達到了 80k 之大。
所以，對其進行打包優化，是一件刻不容緩的事情。
優化
優化主要目的有：
- 加快資源加載速度，減少用戶等待的時間和首頁白屏時間，提高用戶體驗。
- 加快打包速度，不要將時間浪費在等待打包上。
解決第一個問題，很多人都會想到資源文件放在 CDN 上就好了，沒錯，這次我們就是通過 CDN 來解決加載問題。
CDN - 提高加載速度
像 vue， element ui 這些比較成熟的框架/組件庫，一般都有免費、高速、公共的 cdn 供開發者使用，鑒於大部分用戶均在國內，所以這次使用了 bootcdn 這個庫。該庫熱門資源比較齊全，各個版本都有，而且國內訪問速度很快，簡直是開發者的福音。
在 index.html 中引入 vue 和 餓了么組件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0"
>
<
title
>vue-admin-template</
title
>
<!-- 同時也要引入對應版本的 css -->
<
link
href
=
"https://cdn.bootcss.com/element-ui/2.3.2/theme-chalk/index.css"
rel
=
"external nofollow"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
div
id
=
"app"
></
div
>
<!-- built files will be auto injected -->
<!-- 先引入 Vue -->
<!-- 引入組件庫 -->
</
body
>
</
html
>
|
因為依賴是從外部引入的，所以需要告知 webpack 在打包時，依賴的來源。
修改 webpack.base.conf.js：
|
1
2
3
4
5
6
7
|
module.exports = {
...
externals: {
vue:
'Vue'
,
'element-ui'
:
'ELEMENT'
}
}
|
再一次打包，確實能極大的壓縮了打包的體積，從 700k 驟減至 130k：
但是隨之而來的就有問題了：
明明我在本地開發，但是由於引入了線上的生產版本的 vue 文件，因此 vue-dev-tools 就不能進行調試。
因此，我們需要再次調整一下 webpack 的配置，webpack.base.conf.js，而且 webpack 注入的 js 總是在最后面的，因此，我們需要 html-webpack-include-assets-plugin 幫忙在注入 app.js 后，再注入相對應的組件庫 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
const HtmlWebpackIncludeAssetsPlugin = require(
'html-webpack-include-assets-plugin'
)
const externals = {
// 因為打包時，還沒注入，所以這里要去掉。
// 'element-ui':'ELEMENT'
}
// 生產環境中使用生產環境的 vue
// 開發環境繼續使用本地 node_modules 中的 vue
if
(process.env.NODE_ENV ===
'production'
) {
externals[
'vue'
] =
'Vue'
// 如發現打包時依舊將 element-ui 打包進入 vendor，可以在打包時將其加入外部依賴。
externals[
'element-ui'
] =
'ELEMENT'
}
// 生產環境默認注入 vue
// 開發環境中不注入
const defaultJS = process.env.NODE_ENV ===
'production'
? [{ path:
'https://cdn.bootcss.com/vue/2.4.2/vue.min.js'
, type:
'js'
}] : []
const plugins = [
new
HtmlWebpackIncludeAssetsPlugin({
assets: defaultJS.concat([
]),
// 是否在 webpack 注入的 js 文件后新增？true 為 append, false 為 prepend。
// 生產環境中，這些 js 應該先加載。
append: process.env.NODE_ENV !==
'production'
,
publicPath:
''
,
})
]
module.exports = {
...
externals,
plugins,
...
}
|
OK，這時候，既能兼顧打包后的體積大小，也能在開發模式中使用 vue-dev-tool 進行調試。
DLL - 提高打包速度
經常打包的前端會發現，很多時候，我們為了修復某些bug（如 promise 在 ie Safari 下的 bug），而新引入了一個 polyfill，然而，打包完后發現，vendor 的 hash 值變了，而整個 vendor 只新加了一個 es6-promise 的依賴，但是付出的代價就是，需要拋棄之前打包好的 vendor，用戶重新訪問時，需要再一次拉取一個全新的 vendor，這個代價就有點大了。
這時候，使用 dllPlugin 打包就有優勢了。它可以將一些基礎依賴模塊統一先打包起來，當正式打包時，則可以略過這些模塊，不再重復打包進去 vendor，提高打包速度的同時也能減少 vendor 的體積。