詳解VueSPA項目優(yōu)化小記

概述

站在用戶的角度思考問題，與客戶深入溝通，找到古田網(wǎng)站設(shè)計與古田網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋古田地區(qū)。

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

詳解Vue SPA項目優(yōu)化小記

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

詳解Vue SPA項目優(yōu)化小記

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

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

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

具體優(yōu)化

gzip壓縮

gzip是GNUzip的縮寫，最早用于UNIX系統(tǒng)的文件壓縮。HTTP協(xié)議上的gzip編碼是一種用來改進web應(yīng)用程序性能的技術(shù)，web服務(wù)器和客戶端（瀏覽器）必須共同支持gzip。目前主流的瀏覽器，Chrome,firefox,IE等都支持該協(xié)議。常見的服務(wù)器如Apache，Nginx，IIS同樣支持,gzip壓縮效率非常高，通常可以達到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開啟成功

詳解Vue SPA項目優(yōu)化小記

引入CDN

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

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

詳解Vue SPA項目優(yōu)化小記

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

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

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

詳解Vue SPA項目優(yōu)化小記

路由懶加載

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

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

詳解Vue SPA項目優(yōu)化小記

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

//異步組件，路由懶加載
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文件夾下的文件，會多出上述文件，每個進行懶加載的組件都會生成一個js，如下圖紅框內(nèi)

詳解Vue SPA項目優(yōu)化小記

第三方按需加載

比如本項目里面使用的echarts，只用到了一個柱狀圖組件，其余的都沒有用到，但是這樣import后打包時卻會把整個echarts都打入包內(nè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)化后，首頁打開時間迅速下降，DomContentLoaded用時不到1s，load完全加載用時不到4s，耗時較多的是幾張背景大圖，本來體積就大，后續(xù)考慮放到cdn上

詳解Vue SPA項目優(yōu)化小記