現(xiàn)象：
image.png
解決思路：
1篇亭、通過(guò)vue-cli-service --report分析打包后的文件信息：
原始分析結(jié)果
如上圖所示突那，ant-design-vue占的大小達(dá)到包大小的一半脆丁，查看工程代碼秃诵，發(fā)現(xiàn)只有（login.vue文件中使用了兩個(gè)ant-designe-vue的組件肥矢，因此斗埂，將main文件中的全局導(dǎo)入ant-designe-vue的地方改成只導(dǎo)入使用的兩個(gè)組件符糊。減少包的大小。實(shí)際操作之后呛凶，再次分析結(jié)果如下：
修改后分析結(jié)果
壓縮包gzip的總大小從573.88KB減少到278.65KB
2男娄、因?yàn)闉g覽器并發(fā)請(qǐng)求數(shù)是有限制的，實(shí)際情況中在第一次并發(fā)請(qǐng)求之后漾稀，又出現(xiàn)多個(gè)小的文件的并發(fā)請(qǐng)求模闲，且文件總大小以及時(shí)間小于第一次的并發(fā)請(qǐng)求時(shí)長(zhǎng)，因此通過(guò)減少chunk數(shù)县好，讓一次并發(fā)請(qǐng)求就盡量可以將文件請(qǐng)求結(jié)束
具體配置如下：在vue.config.js中添加如下代碼：
const webpack = require('webpack');
module.exports = {
chainWebpack (config) {
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin,[{
maxChunks:5, // 必須大于或等于 1
minChunkSize: 10000
}])
}
}
修改配置之前打包文件數(shù)如下：
修改前
修改之后打包文件數(shù)如下：
修改后
3围橡、在沒(méi)有做任何修改之前，不做緩存的情況下缕贡，并非開(kāi)屏?xí)r間都長(zhǎng)翁授，因此這個(gè)應(yīng)該不是因?yàn)榍岸舜a包大小的問(wèn)題拣播。
仔細(xì)看瀏覽器的network后看到有兩個(gè)文件的TTFB以及download content時(shí)長(zhǎng)過(guò)長(zhǎng)。
3.1收擦、TTFB時(shí)長(zhǎng)問(wèn)題
詳細(xì)描述見(jiàn)TTFB
通常服務(wù)器在訪問(wèn)靜態(tài)資源的時(shí)候贮配，TTFB時(shí)長(zhǎng)是在50ms以下。
現(xiàn)有項(xiàng)目中TTFB時(shí)長(zhǎng)較長(zhǎng)的時(shí)候塞赂，明顯有兩個(gè)文件的TTFB時(shí)長(zhǎng)過(guò)長(zhǎng)泪勒，一個(gè)是vendor一個(gè)是css文件，具體時(shí)長(zhǎng)如下圖：
vendor文件
css文件
而接口請(qǐng)求時(shí)長(zhǎng)均在可接受范圍內(nèi)宴猾，如下圖：
接口訪問(wèn)1
接口訪問(wèn)2
因此圆存，從上述現(xiàn)象中看，接口請(qǐng)求不需要優(yōu)化仇哆，可以通過(guò)CDN加速靜態(tài)資源文件的加載
