- 注：本文只適用于 vue-cli 初始化的項目或依賴于 webpack 打包的項目 *
首屏加載優(yōu)化
背景：基于vue-cli3創(chuàng)建的項目編譯后發(fā)布測試，發(fā)現(xiàn)有個文件chunk-vendors文件大小達(dá)到846kb，加載耗時達(dá)到7.38s左右，首屏白屏?xí)r間過長。
1.png
針對這個進(jìn)行以下優(yōu)化：
- 路由懶加載
這個我在項目里已經(jīng)做到了，但是針對這個匯總再簡單總結(jié)下
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ './views/home/index.vue'),
meta: { isShowHead: true }
}
我這里是結(jié)合ES 提出的 import方法和webpack魔法注釋 /* webpackChunkName: "group-foo" */輕松實現(xiàn)路由懶加載
- 開啟服務(wù)器Gzip
盡管第一步已經(jīng)做到了，但仍然有846k的大小，所以需要繼續(xù)優(yōu)化。開啟Gzip就是一種壓縮技術(shù)，需要前端提供壓縮包，然后在服務(wù)器開啟壓縮，文件在服務(wù)器壓縮后傳給瀏覽器，瀏覽器解壓后進(jìn)行再進(jìn)行解析。
首先安裝webpack提供的compression-webpack-plugin進(jìn)行壓縮,然后在vue.config.js：
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
......
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
....
然后在Nginx配置
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
此時我們再看chunk-vendors文件大小達(dá)到227k，耗時1.7s
2.jpg
- 啟動CDN加速
我們繼續(xù)采用cdn的方式來引入一些第三方資源，就可以緩解我們服務(wù)器的壓力，原理是將我們的壓力分給其他服務(wù)器點。
首先在index.html中：
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
然后在vue.config.js中通過externals外部擴(kuò)展，可以忽略不需要打包的庫：
module.exports = {
......
configureWebpack: (config) => ({
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui': 'ElementUI'
}
})
......
}
main.js
import Vue from 'vue' // 下面有用到所以沒注釋
// import ElementUI from 'element-ui' // 注釋
// import axios from 'axios' // 注釋
store.js
// import Vue from 'vue' // 注釋
// Vue.use(Vuex) // 注釋
import Vuex from 'vuex'
router.js
// import Vue from 'vue' // 注釋
// Vue.use(Router) // 注釋
import Router from 'vue-router'
這個時候我們再來看下效果：
3.png
可以看到chunk-verdors文件已減小到20.9kb，耗時172ms，基本項目秒開無壓力了。
- 其他優(yōu)化點
——在vue.config.js中設(shè)置productionSourceMap:false這樣打包后map文件就沒了，map文件的作用在于：項目打包后，代碼都是經(jīng)過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準(zhǔn)確得知是哪里的代碼報錯。有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯。如果不需要的話可以這樣操作。
——修改uglifyOptions去除console來減少文件大小，如果代碼中打了很log，這個優(yōu)化還是有點效果的。
代碼層面優(yōu)化
針對vue項目代碼層面優(yōu)化就得回歸到.vue文件中對HTML、CSS、javascript進(jìn)行優(yōu)化，那么主要就是<template>、<style>、<script>中可優(yōu)化的點：
- computed 和 watch 區(qū)分使用場景
- computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed 的值。當(dāng)我們需要進(jìn)行數(shù)值計算，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；
- watch：類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進(jìn)行后續(xù)操作；當(dāng)我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應(yīng)該使用 watch，使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API )，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計算屬性無法做到的。
- v-if 和 v-show 區(qū)分使用場景
v-if 適用于在運行時很少改變條件，不需要頻繁切換條件的場景；v-show則適用于需要非常頻繁切換條件的場景。這里要說的優(yōu)化點在于減少頁面中 dom 總數(shù)，我比較傾向于使用 v-if，因為減少了 dom 數(shù)量。 - v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if
- v-for 遍歷必須為 item 添加 key，循環(huán)調(diào)用子組件時添加 key，key 可以唯一標(biāo)識一個循環(huán)個體，可以使用例如 item.id 作為 key
- 避免同時使用 v-if，v-for 比 v-if 優(yōu)先級高，如果每一次都需要遍歷整個數(shù)組，將會影響速度。
- 圖片懶加載
vue-lazyload可參考下官方介紹，不再贅述。 - style方面
- style文件按照模塊劃分，無論放在內(nèi)外都
<style lang="scss" scoped>鎖住樣式，目的就是避免多人開發(fā)樣式混亂，鎖住之后內(nèi)部的命名也可以很簡短。 - 全局樣式抽象化，將公共組件以及elementUI修改的樣式建議都放到公共樣式，抽象做的越好說明你的樣式文件體積越小，復(fù)用率越高。
- style文件按照模塊劃分，無論放在內(nèi)外都
- 合理組件化
- 使用重復(fù)率高的模塊盡量封裝成組件，包括布局的封裝，按鈕，表單，提示框，彈出框等，封裝的組件只處理
類似業(yè)務(wù)，復(fù)用率越高越好 - 封裝組件配置的 props 細(xì)化到一個字段，不要一個對象傳進(jìn)去，這樣只傳需要修改的參數(shù)，在子組件 props 里加數(shù)據(jù)類型，是否必傳，以及默認(rèn)值，便于排查錯誤，讓傳值更嚴(yán)謹(jǐn)。
- 使用重復(fù)率高的模塊盡量封裝成組件，包括布局的封裝，按鈕，表單，提示框，彈出框等，封裝的組件只處理
結(jié)尾：另外還有諸如SSR（服務(wù)端渲染），首頁骨架屏加載等優(yōu)化方法都可以考慮下，還有其他優(yōu)化點鐵子們可以評論區(qū)一塊討論下~
