概述

之前做了一個(gè)React項(xiàng)目和Vue的項(xiàng)目，在做完后不加任何優(yōu)化的情況下，這2個(gè)項(xiàng)目的首屏加載平均時(shí)間居然達(dá)到了20+s，好一點(diǎn)能進(jìn)10s，差一點(diǎn)快30s，完全不能忍，優(yōu)化勢在必行，本文章記錄下Vue項(xiàng)目的優(yōu)化過程，React項(xiàng)目的優(yōu)化后續(xù)補(bǔ)上。

上圖是Vue項(xiàng)目的首頁，整個(gè)項(xiàng)目由vue-cli搭建，主要分為4個(gè)模塊，見頁面左側(cè)導(dǎo)航欄，總體代碼量不算太大，組件的話總共50個(gè)左右吧，項(xiàng)目結(jié)構(gòu)見下圖，不算特別大的項(xiàng)目，但是首屏加載時(shí)間居然這么慢。

首先得確定到底是哪里導(dǎo)致了首屏渲染如此之慢？打開Chrome Network面板，勾上Disable cache選項(xiàng)，刷新頁面觀察資源加載情況，發(fā)現(xiàn)罪魁禍?zhǔn)拙褪莣ebpack打包生成的app.js和vendor.js，其中vendor.js大小達(dá)到了1.2M,下載時(shí)間超過20秒，app.js也快到1M，而manifest.js不是很大。vendor.js主要是把node_modules里所用到的modules都合并成一個(gè)js了，所以比較大.而我們也希望將業(yè)務(wù)代碼和第三方引用分開打包。 manifest.js 包含webpack的runtime代碼和module manifest代碼，作用是防止修改了代碼但是沒有修改第三方庫文件導(dǎo)致第三方庫文件也打包的問題。

網(wǎng)上一番搜索，發(fā)現(xiàn)優(yōu)化點(diǎn)主要在如下幾個(gè)方面:

1. 開啟gzip壓縮功能
2. 引入CDN
3. 路由懶加載
4. 某些第三方組件按需加載而不是全部加載
5. 較小的圖片資源用base64嵌入src中，減少http請求

具體優(yōu)化

gzip壓縮

gzip是GNUzip的縮寫，最早用于UNIX系統(tǒng)的文件壓縮。HTTP協(xié)議上的gzip編碼是一種用來改進(jìn)web應(yīng)用程序性能的技術(shù)，web服務(wù)器和客戶端（瀏覽器）必須共同支持gzip。目前主流的瀏覽器，Chrome,firefox,IE等都支持該協(xié)議。常見的服務(wù)器如Apache，Nginx，IIS同樣支持,gzip壓縮效率非常高，通?？梢赃_(dá)到70%的壓縮率，也就是說，如果你的網(wǎng)頁有30K，壓縮之后就變成了9K左右

我后端是用的express，開啟gzip非常簡單，首先npm install compression安裝中間件,然后在app.js里添加use使用即可：

var compression = require('compression');
var app = express();
app.use(compression())

重啟服務(wù)，觀察網(wǎng)絡(luò)面板里面的response header，如果看到如下紅圈里的字段則表明gzip開啟成功

引入CDN

CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))，是一種公共服務(wù)，他本身有很多臺位于不同地域、接入不同運(yùn)營商的服務(wù)器，而所謂的使用CDN實(shí)質(zhì)上就是讓CDN作為網(wǎng)站的門面，用戶訪問到的是CDN服務(wù)器，而不是直接訪問到網(wǎng)站。由于CDN內(nèi)部對TCP的優(yōu)化、對靜態(tài)資源的緩存、預(yù)取，加上用戶訪問CDN時(shí)，會被智能地分配到 最近 的節(jié)點(diǎn)，降低大量延遲，讓訪問速度可以得到很大提升

一個(gè)原則是盡量將比較大的第三方庫放到cdn上去以減少請求時(shí)間，在我的項(xiàng)目中，我將vue,vuex,vue-router,echarts都放到了cdn上，具體操作是打開BootCDN 然后搜索關(guān)鍵字并copy鏈接粘貼到index.html的body閉合標(biāo)簽前，如下圖

注意選取min.js(體積最小),然后在webpack.base.conf.js里設(shè)置externals選項(xiàng)，目的是不打包這些選項(xiàng),由于index.html中script的引入，比如vue就會有一個(gè)全局變量Vue存在，因此這里external的value就是Vue

externals: {
 'vue': 'Vue',
 'vuex': 'Vuex',
 'vue-router': 'VueRouter',
 'echarts': 'echarts'
 },

cdn使用后優(yōu)勢是巨大的，觀察network面板，時(shí)間幾乎都在50ms以下

路由懶加載

路由懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。像vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會異常的大，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多，時(shí)間過長，會出現(xiàn)長時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)。

Vue官網(wǎng)的示例如下，采用異步組件和webpack的code-splitting結(jié)合

因此在項(xiàng)目中，進(jìn)入router的index.js中，將原來的 import Comp from '@/component/xxx' 改為如下,vue-router的配置項(xiàng)還是保持不變

//異步組件，路由懶加載
const BookMark = resolve => require(['@/components/BookMark'],resolve);
const HotBookMark = resolve => require(['@/components/HotBookMark'],resolve);
const ImportBookMark = resolve => require(['@/components/ImportBookMark'],resolve);
const Default = resolve => require(['@/components/Default'],resolve);

打包后查看js文件夾下的文件，會多出上述文件，每個(gè)進(jìn)行懶加載的組件都會生成一個(gè)js，如下圖紅框內(nèi)

第三方按需加載

比如本項(xiàng)目里面使用的echarts，只用到了一個(gè)柱狀圖組件，其余的都沒有用到，但是這樣import后打包時(shí)卻會把整個(gè)echarts都打入包內(nèi)，造成空間浪費(fèi)

import echarts from 'echarts'

因此只需要import用到的組件即可，如下，這樣就可以減少很多不必要的體積

import echarts from 'echarts/lib/echars'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

圖片轉(zhuǎn)base64

小圖片可以轉(zhuǎn)為base64字符串然后嵌入img的src中，節(jié)省http請求數(shù)量,webpack中用url-loader處理,limit控制了圖片轉(zhuǎn)base64的閾值，小于該值就轉(zhuǎn)base64

 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },

優(yōu)化后性能

經(jīng)過上述優(yōu)化后，首頁打開時(shí)間迅速下降，DomContentLoaded用時(shí)不到1s，load完全加載用時(shí)不到4s，耗時(shí)較多的是幾張背景大圖，本來體積就大，后續(xù)考慮放到cdn上

這是最初的優(yōu)化策略，后續(xù)繼續(xù)會進(jìn)行深度優(yōu)化。

ps：webpack-bundle-analyzer是神器，能夠有效分析出包占用的體積情況~下圖是最終優(yōu)化后的包組成結(jié)構(gòu)圖，最初打包的結(jié)構(gòu)圖比下圖大很多，主要多了echarts,vue,vue-router,vuex模塊

優(yōu)化后的整個(gè)包gzip后大小喜人~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論