首頁 > web前端 > js教程 > 關於vue首屏載入優化的介紹

關於vue首屏載入優化的介紹

不言
發布: 2018-06-29 10:57:26
原創
2603 人瀏覽過

這篇文章主要介紹了淺談vue首屏加載優化,內容挺不錯的,現在分享給大家,也給大家做個參考。

本文介紹了淺談vue首屏載入優化,分享給大家,具體如下:

庫使用情況

  1. vue

  2. vue-router

  3. #axios

  4. ##muse- ui

  5. material-icons

  6. #vue-baidu-map

未優化前

首先我們在正常情況下build




##1. 按需載入

目前流行的UI框架如iview,muse-ui,Element UI都支援按需載入,只需稍微改動程式碼.

修改前:

import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-light.css'
Vue.use(MuseUI)
登入後複製

修改後:

import appBar from 'muse-ui/src/appBar'
import toast from 'muse-ui/src/toast'
import drawer from 'muse-ui/src/drawer'
import popup from 'muse-ui/src/popup'

Vue.component(appBar.name, appBar);
Vue.component(toast.name, toast);
Vue.component(drawer.name, drawer);
Vue.component(popup.name, popup);
登入後複製

這裡有點麻煩的就是你要把整個專案用到的muse-ui元件都註冊一遍,當然你也可以只在用到的頁面做局部引用.

讓我們來看看使用按需載入後的效果?


在目前專案引用了16個muse-ui元件的情況下css減少了80kb,js減少了快200kb.

2. 基於DllPlugin 和DllReferencePlugin 的webpack 建置最佳化

這一步並沒有對專案產出的檔案進行什麼最佳化.而是優化了建置速度.

DllPlugin 預編譯模組.有點像android開發中的lib Module,或iOS的framework.

我們可以對專案中用到的vue,vue-router,axios,muse-ui 這些固定的,基本不變的模組進行預編譯. 具體操作不在贅述,可以看一下這篇文章,也是我寫的,但是覺得自己沒講利索? .

看一下構建時間的結果對比:

before:38291ms

after :10089ms

專案中多了core.dll.css和core.dll.js 他們就是分割出來的固定的,基本不變的模組,所以只需要編譯一次,以後引用就好.有點library的感覺.這樣每次構建省去了構建固定模組的時間. 時間有38s降到了10s,如果你構建比較頻繁,應該還是很有用的.
3. 異步組件官方文檔

官方文件是這麼介紹的:

在大型應用程式中,我們可能需要將應用程式拆分為多個小模組,按需從伺服器下載。為了讓事情更簡單, Vue.js 允許將元件定義為一個工廠函數,動態地解析元件的定義。 Vue.js 只在元件需要渲染時觸發工廠函數,並且把結果快取起來,用於後面的再次渲染。


修改router


before:

import search from './search.vue'
{
      path: '/search',
      name: 'search',
      component: search
}
登入後複製

after:

const search = resolve => require(['./search.vue'], resolve);
{
      path: '/search',
      name: 'search',
      component: search
}
登入後複製

具體我們來看看改造後的效果:

#因為我的專案目前只有7個頁面,即使把頁面都做成異步加載,效果並不是很'喜人',整體縮小了30kb.

4. 最佳化元件載入時機

再使用別人的元件時,上手教學都會提示讓你在main.js裡註冊一下就好.當然這是最省事的辦法.

但是根據專案情況,例如我的專案用到了vue-baidu-map.

如果你按照預設的載入方式,vue-baidu-map是會被打在vendor.js .但其實這個元件我只有某個二級頁面才使用.所以讓我們來調整一下載入位置看看.把註冊的vue-baidu-map放在真正使用它的地方.##### ##########這樣,verdor.js 又小了56kb.因為首頁根本用不到vue-baidu-map. 當然這樣會帶來一個問題:當多個頁面使用vue-baidu-map ,會出現多個頁面重複打包.###############怎麼異步載入外掛,這個我還沒搞懂...######5. webpack-bundle- analyzer######webpack-bundle-analyzer是用來分析Webpack 產生的包體組成並且以可視化的方式回饋給開發者的工具.你可以透過命令:###
npm run build --report
登入後複製
###來查看依賴關係.然後再根據具體情況劃分程式碼區塊.效果圖就是上面那張花里胡哨的圖...它清楚的告訴你了打包時模組劃分的情況.######6. 前後對比:###

638.7kb vs 286.2kb

##這還是在未開啟gzip的情況下.

新增一張開啟gzip的截圖,84.8kb,相對最後的最佳化結果286.2kb是70%的壓縮比...哈哈


#總結

  • 在使用ui函式庫時,盡量使用按需載入方式.

  • #非同步載入,官方文件很詳盡,改造起來也不難,可以試試

  • #合理規劃三方庫的引用.這個聽起來有點龜毛,'收益'可能也不是很高,不過是個調整方向

  • 善用webpack-bundle-analyzer優化項目依賴

  • ##服務端開啟gzip壓縮,誰用誰知道!
  • 以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

Vue SPA單頁應用首屏優化的介紹


如何解決Vue下路由History模式打包後頁面空白

#

以上是關於vue首屏載入優化的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板