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

這篇文章主要介紹了淺談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中文網其他相關文章！