vue首屏加載優化

時間 2019-11-06

標籤 vue 加載優化简体版

原文原文鏈接

庫使用狀況

vuejavascript
vue-routercss
axioshtml
muse-ui前端
material-iconsvue
vue-baidu-mapjava

未優化前

首先咱們在正常狀況下build
android

優化

1. 按需加載

當前流行的UI框架如iview,muse-ui,Element UI都支持按需加載,只需稍微改動一下代碼.webpack

修改前：ios

import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-light.css'
Vue.use(MuseUI)

修改後：web

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放在真正使用它的地方.