vue項目優化方案

一、路由不少的複雜頁面，路由懶加載

—使用const Foo = () => import('./Foo.vue')代替import './Foo.vue'；

二、外部庫有提供按需加載的功能，能夠按照官方文檔的作法來按需加載

三、開啓Gzip壓縮

四、頁面渲染優化（減小重排），組件優化、基礎優化（js、css），圖片優化

—vue官網中的規範須要遵循；

—按模塊劃分路由。按照業務模塊劃分路由及子路由，按照功能或交互稿或視覺稿劃分組件模塊；

—提取共用的方法、共用的樣式、共用的狀態；

—使用字體圖標代替純色或漸變色的圖標，如使用icomoon；

—圖片懶加載--到可視區域再加載；

—v-if，v-show的選擇。權限相關使用v-if、頻繁切換使用v-show、不頻繁切換使用v-if；

—style中使用<style scoped>避免衝突，全局style儘可能抽象，提升複用率，減少css文件大小，節省帶寬；

—根據頁面複雜度，刪除部分頁面生命週期created中的window.setTimeout方法；

五、網絡請求優化

—一般會選擇對 http 請求的方法進行二次封裝，以便增長統一的攔截器，或者統一處理阻止重複提交之類的邏輯；

—合理使用vuex，頻繁切換的頁面組件好比多個編輯頁面，保存多個數據store，減小http請求；

六、合理使用緩存

—合理設置HTTP緩存。從圖1 瀏覽器請求處理流程圖中能夠看出，恰當的緩存設置能夠大大減小HTTP請求，節省帶寬。

如不多變化的資源（html、css、js、圖片等）經過 HTTP Header中的cache-control和Expires可設定瀏覽器緩存，變化不頻繁又可能變的資源使用Last-Modifed來作請求驗證；

 

七、打包優化

—webpack提供的externals能夠配合外部資源CDN輕鬆大幅度減小打包體積，適用於echarts、jQuery、lodash這種暴露了一個全局變量的庫；

—生產環境採用webpack-parallel-uglify-plugin，進行壓縮；