一、 使用webpack-bundle-analyzer 分析打包后的生成的文件結(jié)構(gòu)進(jìn)行優(yōu)化胳泉；
在package.json配置 "analyz": "NODE_ENV=production npm_config_report=true npm run build" 蒜撮，然后運(yùn)行 npm run analyz 即可晴氨；
通過(guò)分析圖艘绍，可以查看哪些有重復(fù)的文件或者哪個(gè)文件較大從而相應(yīng)的進(jìn)行優(yōu)化晦雨；
這里提一下侥猩，左上角的stat榔至、parsed及gzip表示什么意思：
stat表示文件的輸入大小，parsed表示文件的輸出大小欺劳，gzip表示通過(guò)gzip壓縮運(yùn)行解析的包/模塊的大羞笕 ；https://github.com/webpack-contrib/webpack-bundle-analyzer#size-definitions
這三個(gè)狀態(tài)文件體積相差很大划提，可見(jiàn)使用gzip的重要性枫弟。
二、啟用 gzip壓縮鹏往；
1淡诗、安裝 compression-webpack-plugin
npm install compression-webpack-plugin --save-dev，
這里有個(gè)坑，就是如果你的vue版本為2.5.2 及以下 webpack版本為3.6.0及以下時(shí)韩容，建議安裝compression-webpack-plugin的版本為1.0.0-beta.1 而不是2.0.0款违，否則可能打包時(shí)會(huì)報(bào)
ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties
2、將vue項(xiàng)目中的 config/index.js中productionGzip: false改為 productionGzip: true群凶；
打包后插爹，可以看到.gz后綴文件了：
3、然后后臺(tái)開(kāi)啟gzip模式：
開(kāi)啟 nginx gzip ,在 nginx.conf 配置文件中 配置
http { //在 http中配置如下代碼请梢，
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #壓縮級(jí)別
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不壓縮臨界值
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
保存退出 赠尾，并 重啟 nginx
systemctl reload nginx.service
systemctl restart nginx.service
4、測(cè)試訪問(wèn)
a毅弧、未開(kāi)啟gzip的情況
b气嫁、開(kāi)啟gzip的情況
可以看到 開(kāi)啟后響應(yīng)頭里有 content-encoding: gzip，且體積減少了一半還多形真。
三杉编、解決vendor.js體積過(guò)大的問(wèn)題
上面我們可以看到未經(jīng)過(guò)gzip壓縮，vendor.js體積有730kb咆霜，體積挺大的邓馒，vendor.js是第三方庫(kù)經(jīng)webpack打包而生成的集合；如下面的main.js 引用的第三方庫(kù)ElementUI 蛾坯、axios會(huì)被打包在vendor.js中
其實(shí) 我們可以使用cdn來(lái)引入第三方庫(kù)：
1光酣、選用cdn服務(wù)商
如 選用unpkg來(lái)作為第三方提供 https://unpkg.com 或者 https://www.bootcdn.cn/ 如我想要axios包則輸入網(wǎng)址為 https://unpkg.com/axios/ (末尾加斜杠代表你要查詢(xún)?cè)搸?kù)的所有版本列表)
2、在index.html中將你所需的第三方庫(kù)的鏈接加入即可：
我以axios為例：
注：應(yīng)該加入到<div id="app"></div>前面
3脉课、啟用DNS預(yù)解析
在index.html的header中加入
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="cdn域名">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
4救军、webpack.base.conf 中添加 externals 來(lái)告訴webpack我們這些第三方庫(kù)不需要打包
externals:{
"axios":"axios" // key--axios 為你在項(xiàng)目中使用的名字，value--axios 為axios庫(kù)的模塊名為axios
},
庫(kù)的模塊名可以在源碼中看倘零，如element-ui 則為ELEMENT
5唱遭、去除原有的引用
包括 import axios from 'axios'; 和Vue.use(axios )
，當(dāng)然如果為了避免去除import axios from 'axios';后導(dǎo)致很多eslint 警告呈驶，你可以保留import axios from 'axios';拷泽； 參考依據(jù)： 外部擴(kuò)展(externals)
https://webpack.js.org/configuration/externals/
完成后打包一下觀察vendor.js的體積變化：
可以看到vendor.js減少了12kb；也就是axios.min.js的大小袖瞻。這里其實(shí)還可以將vue司致、element ui 都拎出來(lái)，可以減少很多體積聋迎；
題外話(huà)：
a脂矫、app.js
app.js 入口文件打包的結(jié)果，里面將項(xiàng)目中的api接口名及請(qǐng)求和響應(yīng)等攔截器霉晕、路由組件關(guān)系等文件全部壓縮打包了庭再，大部分為我們自己編寫(xiě)的代碼
b捞奕、manifest.js
manifest.js 模塊化的應(yīng)用程序的所有代碼，里面是 建立hash映射關(guān)系的文件
c佩微、vendor.js 第三方庫(kù)缝彬，一般是node_modules里面的依賴(lài)進(jìn)行打包
d、vendor-async.js
vue中mixin里的所有代碼都會(huì)打包至vendor-async.js中
四哺眯、采用webpack.DllReferencePlugin將不常變更的庫(kù)免二次打包編譯；
這個(gè)可大大減少編譯時(shí)間扒俯，同時(shí)可使用未變更的文件的緩存奶卓；
具體可參考
1、 Webpack的dll功能
2撼玄、webpack進(jìn)階——DllPlugin優(yōu)化打包性能（基于vue-cli）
其實(shí)采用webpack.DllReferencePlugin跟上面介紹的--解決vendor體積過(guò)大的問(wèn)題中的 externals方法存在異曲同工之處夺姑，貌似它們間有差別,但這個(gè)差別有待考證:
經(jīng)過(guò)查看的回答發(fā)現(xiàn)webpack.DllReferencePlugin可以由autodll-webpack-plugin完美替代，這點(diǎn)待后面有時(shí)間再研究掌猛；
五盏浙、路由懶加載
使用
// 官方寫(xiě)法
const CardActConsume = () => import('@/components/club/CardActConsume')
// 自己的寫(xiě)法
const CardBuyConsume = (resolve) => {
import('@/components/club/CardBuyConsume').then((module) => {
resolve(module)
});
}
...
{
path: '/club/:id/cardactconsume',
name: 'clubcardactconsume',
component: CardActConsume,
}
...
替代原有的
import CardActConsume from '@/components/club/CardBuyConsume'
這個(gè)就不多說(shuō)了 ，可見(jiàn)官方文檔： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97荔茬；另外可以把組件按組分塊打包成一個(gè)js：
六废膘、webpack 配置文件記得區(qū)分開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境
生產(chǎn)環(huán)境不要包含HotModuleReplacementPlugin 等沒(méi)有必要的插件；
七慕蔚、提升服務(wù)器帶寬
如果條件運(yùn)行丐黄，跟運(yùn)維說(shuō)下讓其提升web頁(yè)面的帶寬。ps:如果帶寬為1M/s孔飒，說(shuō)明太帶寬設(shè)置的太小了灌闺，可以設(shè)置5M/s及以上。ps：我們是10M/s
八坏瞄、如果使用了cdn桂对，可以參考購(gòu)買(mǎi)的cdn服務(wù)商的說(shuō)明
這里以阿里云為例：
1、性能優(yōu)化概述
2鸠匀、提高CDN緩存命中率
九蕉斜、推薦文章集合
推薦資料：
1、https://webpack.docschina.org/guides/lazy-loading/
2狮崩、 vue-cli中的webpack配置
參考資料：
1蛛勉、完美解決 vue webpack 單頁(yè)面 加載慢 gzip 訪問(wèn) vendor.js 打包文件過(guò)大問(wèn)題
2、 使用vue-cli生成的vendor.js文件太大睦柴，有辦法減少體積嗎诽凌？
3、[https://juejin.im/post/5a291092518825293b50366d#heading-2](VueSPA 首屏加載優(yōu)化實(shí)踐)
