vue cli webpack 首屏載入效能優化

我自己嘗試用阿里雲部署了乙個簡單的部落格**，但是載入速度非常慢，接近8s，所以嘗試進行優化。

1，去掉map檔案

首先預設的vue-cli會生成map檔案，用於debug的時候快速定位原始檔位置，但是我們部署到生產環境的時候並不需要這個，我們將config/index.js裡面的productionsourcemap設定為false，這樣就不會生產map檔案了

2，使用gzip壓縮

將config/index.js裡面的productiongzip設定為true之後，build的時候就會自動將css和js打包成gzip檔案，同時js檔案也會保留，但是我們檢視build出的dist的資料夾裡面的index.html檔案，會發現，其中資源檔案的字尾仍然是.js或者.css，並沒有變成gz，所以想要在瀏覽器訪問**的時候獲取gz而不是未壓縮的檔案，一種方法是直接手動把html檔案中資源字尾名加上.gz，另一種依賴後端的實現，比如後端，收到瀏覽器的request頭，知道瀏覽器支援gzip型別，那就返回對應資源的gz檔案，django我是不清楚怎麼做，但是可以在伺服器端使用nginx**，然後開啟gzip static(見這樣nginx就可以自動完成這樣的過程

3，利用webpack的**分割功能

這時候應該先貼個效果圖震驚一下，從2s變成了接近0.5s，感覺就是回車一按，頁面就載入出來了

（1）首先了解一下webpack的非同步載入模組的方式import()

我們在平時編寫vue專案的時候，引入模組使用的語句是

import vuequilleditor from 'vue-quill-editor'

像是這樣的格式，這是es6引入的模組管理的乙個引入方式，我們想將其改為非同步載入可以這樣寫

const geteditor = () => import('vue-quill-editor')

這個語句定義了乙個函式geteditor返回import(『...』) ，其實返回的會是乙個promise物件，也就是說，我們想利用這個模組就需要使用promise那一套，比如then

function use(get))
}use(geteditor)

先定義了乙個函式use，引數是乙個函式get，執行get函式，之後利用then處理引入的module，之後vue.use(module.default)，這樣就是乙個使用元件的例子了，vue.use的功能建議自己去查一下，那為什麼要.default呢，說起來我也很好奇，雖然我知道es6裡有乙個export default,但是具體還真的不了解，所以這個以後再研究一下，這是我利用console.log(module)發現module.default才是指向本來模組才發現的。

但是，假如，你有多個元件想要引入，多個元件的體積分別很小，你希望把他們打包在一起，這時候我們可以使用魔術注釋嗎，如下：

const geteditor = () => import(
/* webpackchunkname: "vue-quill-editor" */
'vue-quill-editor'
)

利用這個注釋，你可以指定**分割後的chunkname，把多個元件的設定為相同，就可以打包到同一檔案了。

（2）對elementui的處理

於是乎，我的專案裡用到了elementui axios vue-quill-editor,因為axios的體積本身就很小，我就不把他分離出來，就只將elementui和vue-quill-editor分離開來，但是，我發現elementui在壓縮後還是佔了170kb，像是editor這個，壓縮後才50kb，按照阿里雲的限速，恐怕速度還是不夠理想，所以我又查了查，發現有老哥遇到和我一樣的問題，elementui怎麼這麼大？如果按照上面那種引入方式，打包的時候整個elementui都被放進去了，屬實拉胯，我們想要能夠按需引用。

對於elementui的乙個按需引用方法，是利用babel，這裡我們可以參考官網，這個頁面教我們如何按需引入元件，如果這樣子做，那多餘的包就不會被引進，最終我就選擇了這個方法，因為用到的元件確實不多，那如果我非要使用webpack的那種分離方式，把他分離出來呢？

可以這樣子，記得取消注釋，不過這好像是針對element-ui的乙個特殊用法，不知道其他庫可不可以

//const getbutton = ()=>import(/* webpackchunkname: "ele-ui" */'element-ui/packages/button')
//const getinput = ()=>import(/* webpackchunkname: "ele-ui" */'element-ui/packages/input')
//const getmessage = ()=>import(/* webpackchunkname: "ele-ui" */'element-ui/packages/message')
//const getloading = ()=>import(/* webpackchunkname: "ele-ui" */'element-ui/packages/loading')
//use(getbutton)
//use(getinput)
//use(getloading)
//getmessage().then((module)=>)

最後，當我們完成後，用chrome的network來分析

vue cli webpack 首屏載入效能優化

首屏優化策略

Vue首屏載入優化

App首屏介面效能優化

vue cli webpack 首屏載入效能優化

首屏優化策略

Vue首屏載入優化

App首屏介面效能優化

相關推薦