-
在利用webpack腳手架搭建vue項目后实夹，往往最終打包的.js和.css文件過于龐大式曲，造成首次加載的時候白屏時間過長咕村，十分影響用戶體驗，下圖為未經(jīng)任何優(yōu)化直接npm run build之后的情況：
image.png - 其中vendor.js文件高達1.16MB押框，平均白屏時間超過10秒，這個確實有點影響用戶體驗了理逊。
第一步：使用CDN剝離JS文件橡伞，讓他們獨立加載，而不是整體打包：
1. 找出那些巨頭JS文件晋被，如本例中的：Vue兑徘、Vue-Router、Element-UI羡洛、Quill等挂脑。
2. 訪問https://www.bootcdn.cn/，找到這些文件的CDN引用（當然也可以是別的CDN網(wǎng)站欲侮，本例使用bootcdn.cn）
3. 修改 項目根目錄下的 index.html
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!--在meta這一行下面添加剛才在cdn網(wǎng)站找到的引用最域，注意版本號要和你的package.json里的一致 -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.min.js"></script>
<script src="/static/js/vue-quill-editor.js"></script>
4. 修改 /build/webpack.base.conf.js 文件
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
// 在這個位置添加externals設(shè)置：
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT', //注意element-ui的引用時純大寫
'vue-quill-editor': 'VueQuillEditor',
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
- 回到Vue源文件里面，刪除所有于Vue锈麸、Vue-Router镀脂、element-ui相關(guān)的import和Use, 例如：
//import ElementUI from 'element-ui'
//import Vue from 'vue'
//import Router from 'vue-router'
//Vue.use(ElementUI)
//Vue.use(Router)
//Vue.use(VueQuillEditor)
- 這些代碼統(tǒng)統(tǒng)注釋或者刪除掉，因為在externals里面已經(jīng)做過聲明了忘伞，如果再在Vue文件里聲明一次薄翅，將會報重復引用的錯誤。
-
完成后氓奈，再執(zhí)行一次npm run build翘魄，發(fā)現(xiàn)果然大大地瘦了一次身，如圖：
image.png - vendor.js從1.2M瞬間減肥減到了109Kb舀奶，效果還是很驚人的暑竟！
4. 開啟zip壓縮模式，進一步瘦身
- 找到：/config/index.js育勺，將productionGzip改為true
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
- 安裝webpack壓縮軟件：
npm install --save-dev compression-webpack-plugin@1.1.11
- 檢查服務(wù)器端有沒有打開gzip但荤，這里以nginx為例，檢查nginx.conf文件：
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
-
再次運行npm run build涧至，結(jié)果如下：
image.png
- 最下面有3個gz文件腹躁，可以看到vendor.js文件被狠狠地壓縮到只有34Kb的程度，最初南蓬，這個文件是有1.2M之巨纺非，所以說瘦身效果還是很明顯的哑了，首頁打開速度也從10+秒減少到了3至5秒之間。
