初次加載vue緩慢
很多小伙伴想必做vue項目的時候，會出初次加載速度緩慢的情況惠爽，拿我接盤公司的小項目說癌蓖，會出現(xiàn)初次加載20s-60s的情況，然后自己看了下接盤的項目婚肆，打包后文件大小如下：
接盤項目打包后文件
其中最大的chunk-vendors文件租副，經(jīng)過網(wǎng)上了解，這是第三方庫的打包組合较性。其次js文件也很大用僧。
可以看出就算經(jīng)過gzip壓縮也需要下載接近
1M的下載量，拿一個同時在線人數(shù)300-400人來說赞咙，一般購買的服務(wù)器為5m帶寬责循，所謂的5m帶寬其實是625kb 的下載速度，項目更新后加載頁面需要重新更新緩存下載完整項目攀操，拿25個人上班重新打開網(wǎng)頁加載完整項目來說 院仿，且大概計算gzip壓縮后體積為1M，625kb/S 除以 25 速和，則個人下載速度為25kb/S歹垫，loading的時間為40s，看著這速度已經(jīng)吐了颠放。
優(yōu)化方案 vue.config.js
上cdn加速加載第三方包
業(yè)務(wù)代碼是經(jīng)常更新迭代的
為了讓瀏覽器盡可能長的時間緩存我們的靜態(tài)文件排惨，如果把類庫代碼和業(yè)務(wù)代碼打包在一起，那么類庫代碼會跟著業(yè)務(wù)代碼的更新而更新碰凶，而不能長時間的是瀏覽器里緩存暮芭，希望利用緩存鹿驼，減少瀏覽器流量，提高用戶瀏覽器加載速度谴麦，所以單獨拆分出來進(jìn)行打包
一般第三方包都會有script引入方案蠢沿，只需要打包的時候忽略制定第三方包伸头，然后在模板上加上相應(yīng)的導(dǎo)入鏈接匾效。
首先沒有vue.config.js需要在項目根目錄創(chuàng)建
具體代碼如下：
const cdn = {
// 忽略打包的第三方庫
externals: {
vue: 'Vue',
"element-ui": "ELEMENT",
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
moment: "moment",
echarts: "echarts"
},
// 通過cdn方式使用
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
"https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js",
],
css: ["https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"],
}
module.exports = {
publicPath: '/CRM/dist/',
// publicPath: './',
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
config.plugins.delete('prefetch')
},
//打包忽略第三方庫
configureWebpack: {
externals: cdn.externals
},
}
然后在 pulic/index.html 模板相應(yīng)位置上加上（添加位置自己看著來）
//下列是css ,script的話注釋換一下，仔細(xì)看很好理解恤磷，config配置是添加一個cdn變量面哼，然后在模板中遍歷添加
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> -->
<% } %>
坑點：比如我在打包后運行就出現(xiàn)ElementUI is not defined的報錯
研究了一下Element-ui 然后發(fā)現(xiàn)script導(dǎo)入的代碼如下：
Element-ui
可以發(fā)現(xiàn)他定義的變量為
ELEMENT 而我們在開發(fā)過程中mian.js采用官方推薦Vue.use(ElementUI)更改后可以運行。
然后我們看結(jié)果
cdn
gzip之后是400kb減少了600kb扫步，可以看出現(xiàn)在app.js邏輯代碼計較大
(還有第三方庫沒上cdn不是最終結(jié)果魔策，加上這是接盤準(zhǔn)備重構(gòu)的系統(tǒng)，所以比較臃腫)
路由懶加載
上圖可以看出現(xiàn)在app.js邏輯代碼還是比較大河胎，而且js文件只有兩個一看就是沒拆分闯袒，直接上最簡單路由懶加載，直接抄官方推薦就好游岳，使用以下方式加載組件
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
結(jié)果
接盤代碼真是難
記過gzip打包后算了算是115kb左右（還有一些庫沒上cdn）政敢，上了會更少。
有不對的地方胚迫，望留言指出喷户，
后續(xù)隨緣更新 業(yè)務(wù)js代碼拆分...
