vue項目優化方案（性能，包體積，頁面加載速度等）

vue項?優化?案（性能，包體積，頁?加載速度等）

vue項?優化?案（性能，包體積，頁?加載速度等）

項?優化，是?個??常談的問題。這?簡單總結?下相關?法：

1.代碼優化，代碼模塊化，組件分離復?，?具函數抽離，注意代碼精簡，v-for渲染加上key屬性，for循環注意break等。

2.路由懶加載。單頁應?把渲染內容都放在js??，下載到本地，然后渲染，如果不使?懶加載，那頁?第?次加載時下載的?件會?較?，?屏

加載會?較慢。使?懶加載后，?產環境下使?webpack分割打包代碼，除了公?的js部分，路由組件js代碼只會在該頁?加載時才從服務器獲

取。懶加載在路由數據?配置，?例：

{

path: '/refreshpage',

name: 'RefreshPage',

component: () => import(/* webpackChunkName: "RefreshPage" */ '../views/refresh-page/'),

},

即使?import動態引?，還可以使?/* webpackChunkName: "RefreshPage" */ 語法指定打包后的包名，其中RefreshPage是包名。

3.合理使?keep-alive，v-if和v-show。keep-alive可以緩存頁?，使得頁?在第?次打開時很快，但也不是越多越好，緩存多了也會使瀏覽器卡

頓。v-show最終渲染為display:none，也就是?css切換顯?隱藏頁?，頁?第?次顯?時不需要創建，會更快，然?，如果頁?結構復雜，有

?量的組件需要顯?隱藏，這時候如果使?v-show，頁?初始加載時就會卡頓，原因是初始時加載了太多的dom，這時候使?v-if會更好，雖然

v-if每次都要創建頁?，單次性能損耗會更?，但在初始時渲染了較少的dom。

4.減少?圖?使?。有些UI是沒有頁?優化意識的，可能給你張輪播圖，拿過來就是?兆（夸張了點，不過1M是正常）。這時候前端必須要有這

個意識，除?項?必須要使??清?質量?圖，否則必須讓UI將圖?給壓縮到200KB以內。

框架庫按需引?。對于只?到部分組件的UI框架，才有按需引?，按需打包，減少?產環境代碼體積

6.避免同?標簽上使?v-for和v-if，因為v-for優先級?于v-if。

通過 Property 對數據進?劫持，來實現視圖響應數據的變化，然?有些時候我們的組件就是純粹的數據展?，不會有任何

改變，有些數據我們不會去更新他，只是展?在頁?上，我們就不需要 Vue 來劫持我們的數據，在?量數據展?的情況下，減少劫持能夠很明顯

的減少組件初始化的時間，可以通過 ?法來凍結?個對象，?旦被凍結的對象就再也不能被修改了

8.?addEventListener聲明的事件，組件內使?的定時器，在組件銷毀時不會?動銷毀，要?動及時銷毀。

9.圖?過多的頁?，為了加速頁?加載速度，將頁?內未出現在可視區域內的圖?先不做加載， 等到滾動到可視區域后再去加載。也提?了?戶

體驗。可使? Vue 的 vue-lazyload 插件

10.想要?屏加載更快，可以考慮ssr服務端渲染，不過后臺管理系統?般可以不考慮ssr。?向C端的?站可以直接使?nuxt。

11.當使?單?件組件時，組件內的 CSS 會以 style 標簽的?式通過 JavaScript 動態注?。這有?些??的運?時開銷，如果使?nuxt服務端

渲染，這會導致?段 “?樣式內容閃爍 (fouc) ” 。將所有組件的 CSS 提取到同?個?件可以避免這個問題，也會讓 CSS 更好地進?壓縮和緩

存。

12.借助Webpack 可視化分析?具。來分析打包后的代碼包體積，例如使?webpack-bundle-analyzer 。vue-cli3腳?架下配置?例：

configureWebpack: config => {

(

new BundleAnalyzerPlugin({

analyzerMode: "disabled",

generateStatsFile: true,

statsFilename: "../"

}),

)

}

13.?產環境開啟giz壓縮。這個需要后端服務器和前端同時開啟。前端在中配置。

(

new CompressionWebpackPlugin()

)

14.注意數據緩存。第?使?vuex緩存和共享數據，使?localStorage或ssionStorage緩存改變頻率?的數據。公?數據使?vue緩存，檢查

不到數據時再調接?獲取，盡量減少接?的重復調?，由于頁?需要對同?接?并發調?時，注意節流，不濫刷接?，?戶點擊做好放連點

15.開啟pwa緩存。這屬于提升?戶體驗的優化，pwa在chome瀏覽器和edg瀏覽器上可以像訪問桌?程序?樣訪問web應?。

16.列表頁?，保存表單可以啟?公共loading,優化?戶體驗

17.和后端的配合。在可能的情況下，盡量讓后端根據頁?返回最?限度適配頁?展?的數據，減少前端處理數據的操作

18.組件私有樣式，即開啟scope的樣式，盡量使?class，少?標簽選擇器。因為?量使?元素選擇器是很慢的。為了給樣式設置作?域，Vue

會為元素添加?個獨???的特性，例如 data-v-f3f3ooe。然后修改選擇器，使得在匹配選擇器的元素中，只有帶這個特性才會真正?效