淺談vue首屏加載優(yōu)化

更新時(shí)間：2018年06月28日 10:27:05 作者：詩(shī)人的咸魚

這篇文章主要介紹了淺談vue首屏加載優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了淺談vue首屏加載優(yōu)化，分享給大家，具體如下：

庫(kù)使用情況

vue
vue-router
axios
muse-ui
material-icons
vue-baidu-map

未優(yōu)化前

首先我們?cè)谡Ｇ闆r下build

優(yōu)化

1. 按需加載

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

修改前：

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);

這里有點(diǎn)麻煩的就是你要把整個(gè)項(xiàng)目用到的muse-ui組件都注冊(cè)一遍,當(dāng)然你也可以只在用到的頁(yè)面做局部引用.

讓我們來看看使用按需加載后的效果?

在當(dāng)前項(xiàng)目引用了16個(gè)muse-ui組件的情況下 css減少了80kb,js減少了快200kb.

2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 構(gòu)建優(yōu)化

這一步并沒有對(duì)項(xiàng)目產(chǎn)出的文件進(jìn)行什么優(yōu)化.而是優(yōu)化了構(gòu)建速度.

DllPlugin 預(yù)編譯模塊.有點(diǎn)像android開發(fā)中的lib Module,或者iOS的framework.

我們可以對(duì)項(xiàng)目中用到的vue,vue-router,axios,muse-ui 這些固定的,基本不變動(dòng)的模塊進(jìn)行預(yù)編譯. 具體操作不在贅述,可以看一下這篇文章,也是我寫的,但是覺得自己沒講利索? .

看一下構(gòu)建時(shí)間的結(jié)果對(duì)比:

before:38291ms
after :10089ms

項(xiàng)目中多了core.dll.css和core.dll.js 他們就是劃分出來的固定的,基本不變的模塊,所以只需要編譯一次,以后引用就好.有點(diǎn)library的感覺.這樣每次構(gòu)建省去了構(gòu)建固定模塊的時(shí)間. 時(shí)間有38s降到了10s,如果你構(gòu)建比較頻繁,應(yīng)該還是很有用的.

3. 異步組件官方文檔

官方文檔是這么介紹的:

在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個(gè)小模塊，按需從服務(wù)器下載。為了讓事情更簡(jiǎn)單， Vue.js 允許將組件定義為一個(gè)工廠函數(shù)，動(dòng)態(tài)地解析組件的定義。Vue.js 只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。

修改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
}

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

因?yàn)槲业捻?xiàng)目目前只有7個(gè)頁(yè)面,即使把頁(yè)面都做成異步加載,效果并不是很'喜人',整體縮小了30kb.

4. 優(yōu)化組件加載時(shí)機(jī)

再使用別人的組件時(shí),上手教程都會(huì)提示讓你在main.js里注冊(cè)一下就好.當(dāng)然這是最省事的辦法.

但是根據(jù)項(xiàng)目情況,比如我的項(xiàng)目用到了vue-baidu-map.

如果你按照默認(rèn)的加載方式,vue-baidu-map是會(huì)被打在vendor.js .但其實(shí)這個(gè)組件我只有某個(gè)二級(jí)頁(yè)面才使用.所以讓我們來調(diào)整一下加載位置看看.把注冊(cè)的vue-baidu-map放在真正使用它的地方.

這樣,verdor.js 又小了56kb.因?yàn)槭醉?yè)根本用不到vue-baidu-map. 當(dāng)然這樣會(huì)帶來一個(gè)問題:當(dāng)多個(gè)頁(yè)面使用vue-baidu-map,會(huì)出現(xiàn)多個(gè)頁(yè)面重復(fù)打包.