vue專案可以從哪些方面進行優化

EternallyMaybe發表於2018-05-02
Vue優化

圖片優化

  1. 圖片大小優化，部分圖片使用WebP（需要考慮webp相容性）

    • 線上生成，如智圖、又拍雲
    • gulp生成，gulp-webp或gulp-imageisux
    • canvas生成

    可以參考juejin.im/post/5ad043…

  2. 減少圖片請求，使用雪碧圖

    • 線上生成：sprites Generator、騰訊的gopng、spriteme
    • 程式碼生成：gulp.spritesmith或者sass的compass

頁面效能優化

圖片或元件懶載入

使用vue-lazyload元件或其他一些元件

vue-lazyload地址：www.npmjs.com/package/vue…

  1. 圖片懶載入：v-lazy或使用v-lazy-container包含一個圖片組
// 引入一張圖片 
<img v-lazy="//domain.com/img1.jpg">  
// 引入一組圖片
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
複製程式碼
  1. 元件懶載入
Vue.use(VueLazyload, {
  lazyComponent: true
});
<lazy-component>
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>
複製程式碼

圖片預載入

快速顯示圖片

使用場景：在某個檢視圖片的元件，當不斷翻看下一頁的圖片時，從服務端獲取資料再展示圖片會出現圖片緩慢載入的情況，此時可以在展示新資料時候先預載入圖片，圖片載入完之後在，將圖片填充到對應位置

三方外掛懶載入（按需載入）

js檔案一般是同步載入的，放在頁面內會阻塞主要js檔案載入。

使用場景：有的專案必須引入jquery等檔案時，在元件內部引入這些檔案一定程度會阻塞頁面渲染，因而通過特定事件（點選或者彈窗）動態載入jquery等JS檔案，可以使主頁面快速顯示出來。

非同步載入頁面，如何讓元件之間不重合

載入多個vue元件時，同時元件是通過服務端資料渲染時，會出現多個元件先重合後分離的狀況

三種方案

  1. 當頁面展示的版塊是固定的時候且內容高度不易變動時候，可以預先在元件外設定一個固定高度，顯示的時候就像在一個框架裡新增內容。當頁面內容不固定時候，為了減少非同步載入時元件重合的問題，可以在首屏在某元件資料載入完成時候設定其他元件顯示，通過v-show顯示。

  2. 當頁面整體固定時，可以為頁面增加一個骨架，這樣防止頁面閃爍的情況

    具體實施可以參照segmentfault.com/a/119000001…

  3. 服務端渲染頁面,對於一些頁面資料固定、更改較少的，可以考慮通過服務端渲染，會在短時間將頁面顯示出來，有比較好的使用者體驗。

減少引入外部檔案大小

專案引入部分ElementUI內容時，通過引入babel-plugin-component配置.babelrc檔案，這樣即可引入部分元件，從而減少元件的大小。

路由懶載入

但使用到vue-router時，webpack會將所有元件打包在一個js檔案中，這樣就導致這個檔案非常大，從而會影響首頁的載入，最好的方法就是將其他路由分別打包到不同js檔案中，切換路由時再載入對應js檔案。

resolve => require([URL], resolve), 支援性好
() => system.import(URL) , webpack2官網上已經宣告將逐漸廢除, 不推薦使用
() => import(URL), webpack2官網推薦使用, 屬於es7範疇, 需要配合babel的syntax-dynamic-import外掛使用
複製程式碼

路由頁面快取

使用vue-router的keep-alive 快取頁面，下次開啟頁面時候不需要重新載入，顯示更快

請求優化

  1. 伺服器對圖片快取
  2. 設定請求快取，設定cache-control
  3. 開啟Gzip,壓縮響應資訊，使傳輸快
  4. 設定DNS快取
  5. 使用HTTP2.0

相關文章