vue項目優化

• 2021 年 11 月 2 日
• 筆記

粒子特效：

vue-particles

nprogress 

網頁載入進度條

全局前置守衛   NProgress.start()

全局後置守衛 ：NProgress.done()

頁面loding

單個頁面加loading、阻止重複點擊 通過element-ui的 Loading 載入（用戶體驗度最高的）

axios封裝

• 封裝axios導出request實例對象（timeout、baseURL、.env、headers content-type、

• 請求攔截器（token、CancelToken、Loading

• 響應攔截器-成功（關閉Loading、 介面許可權、TOKEN過期、res.data.data過濾

• 響應攔截器-失敗（關閉Loading、timeout處理 、404、canceled、郵件報警捕捉前端異常

vue-lazyload     

vue圖片懶載入

 vue文件中將需要懶載入的圖片綁定 v-bind:src 修改為 v-lazy 

路由/組件懶載入

關閉預載入prefetch

chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete(‘prefetch’)
},

解決首屏載入過慢

CDN優化第三方庫

通過 externals 載入外部CDN資源

映入了CDN就不要再打包這個模組了，所以通過 externals 來排除這個模組