這篇文章主要介紹了淺談vue首屏加載優化,內容挺不錯的,現在分享給大家,也給大家做個參考。
本文介紹了淺談vue首屏載入優化,分享給大家,具體如下:
庫使用情況
vue
vue-router
#axios
未優化前
首先我們在正常情況下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);
讓我們來看看使用按需載入後的效果?
2. 基於DllPlugin 和DllReferencePlugin 的webpack 建置最佳化這一步並沒有對專案產出的檔案進行什麼最佳化.而是優化了建置速度.
在目前專案引用了16個muse-ui元件的情況下css減少了80kb,js減少了快200kb.
DllPlugin 預編譯模組.有點像android開發中的lib Module,或iOS的framework.
看一下構建時間的結果對比:before:38291ms我們可以對專案中用到的vue,vue-router,axios,muse-ui 這些固定的,基本不變的模組進行預編譯. 具體操作不在贅述,可以看一下這篇文章,也是我寫的,但是覺得自己沒講利索? .
after :10089ms
專案中多了core.dll.css和core.dll.js 他們就是分割出來的固定的,基本不變的模組,所以只需要編譯一次,以後引用就好.有點library的感覺.這樣每次構建省去了構建固定模組的時間. 時間有38s降到了10s,如果你構建比較頻繁,應該還是很有用的.
3. 異步組件官方文檔
官方文件是這麼介紹的:
在大型應用程式中,我們可能需要將應用程式拆分為多個小模組,按需從伺服器下載。為了讓事情更簡單, Vue.js 允許將元件定義為一個工廠函數,動態地解析元件的定義。 Vue.js 只在元件需要渲染時觸發工廠函數,並且把結果快取起來,用於後面的再次渲染。
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
##這還是在未開啟gzip的情況下.新增一張開啟gzip的截圖,84.8kb,相對最後的最佳化結果286.2kb是70%的壓縮比...哈哈638.7kb vs 286.2kb
#總結
相關推薦:
Vue SPA單頁應用首屏優化的介紹如何解決Vue下路由History模式打包後頁面空白#
以上是關於vue首屏載入優化的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!