Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度

第Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度目錄前言一.請(qǐng)求內(nèi)容太大

解決方案：CDN引入壓縮請(qǐng)求資源一.http請(qǐng)求次數(shù)太多

解決方案：總結(jié)

前言

影響網(wǎng)頁(yè)響應(yīng)速度的因素有很多，例如：請(qǐng)求內(nèi)容太大、http請(qǐng)求次數(shù)太多、服務(wù)器本身處理請(qǐng)求太久、JS腳本執(zhí)行耗時(shí)過(guò)長(zhǎng)、瀏覽器回流重繪等。網(wǎng)站頁(yè)面的響應(yīng)速度與用戶(hù)體驗(yàn)息息相關(guān)，直接影響到用戶(hù)是否愿意繼續(xù)訪(fǎng)問(wèn)你的網(wǎng)站。對(duì)于Vue項(xiàng)目而言，最普遍的問(wèn)題可能在于打包后的文件太大，導(dǎo)致加載時(shí)間過(guò)長(zhǎng)。服務(wù)器請(qǐng)求處理太久和js腳本執(zhí)行耗時(shí)過(guò)長(zhǎng)，這兩個(gè)跟代碼的質(zhì)量和服務(wù)器配置關(guān)系太重，需要根據(jù)具體的項(xiàng)目和代碼進(jìn)行優(yōu)化，今天我們只從請(qǐng)求次數(shù)和打包后的單文件過(guò)大兩個(gè)層面去優(yōu)化網(wǎng)頁(yè)響應(yīng)速度(這個(gè)適用于所有前端項(xiàng)目)。

一.請(qǐng)求內(nèi)容太大

在項(xiàng)目打包后，我們經(jīng)常會(huì)發(fā)現(xiàn)打包后的文件vendors和app文件尤其過(guò)大，其中app.js文件里放的是項(xiàng)目中各個(gè)頁(yè)面的邏輯代碼，vendor.js放的是各個(gè)頁(yè)面各個(gè)組件公用的一些代碼。隨著項(xiàng)目復(fù)雜度的增加，該文件的大小也與日俱增。在帶寬有限的情況下，往往下載這兩個(gè)文件就會(huì)等很長(zhǎng)時(shí)間。

解決方案：

路由懶加載：分割代碼塊

Vue支持異步組件，即可以在使用組件的地方使用一個(gè)Promise，Promise最終會(huì)通過(guò)resolve回傳一個(gè)組件對(duì)象。而webpack的動(dòng)態(tài)import的方式可以讓代碼分塊進(jìn)行打包，并且返回一個(gè)Promise(正是異步組件所需要的)。在路由配置表里使用import可以將各個(gè)頁(yè)面組件分割成不同的代碼塊，然后當(dāng)路由被訪(fǎng)問(wèn)的時(shí)候才加載對(duì)應(yīng)的組件，這樣就避免將所有內(nèi)容打包在一個(gè)chunk里，從而“按需加載”，大大提高響應(yīng)速度。如下圖所示引入路由組件：

CDN引入

業(yè)務(wù)代碼是經(jīng)常更新迭代的，為了讓瀏覽器盡可能長(zhǎng)的時(shí)間緩存我們的靜態(tài)文件，如果把類(lèi)庫(kù)代碼和業(yè)務(wù)代碼打包在一起，那么類(lèi)庫(kù)代碼會(huì)跟著業(yè)務(wù)代碼的更新而更新，而不能長(zhǎng)時(shí)間的利用瀏覽器里緩存。我們希望利用緩存，減少瀏覽器流量，提高用戶(hù)瀏覽器加載速度，所以單獨(dú)拆分出來(lái)進(jìn)行打包。一般第三方包都會(huì)有script引入方案，只需要打包的時(shí)候忽略制定第三方包，然后在模板上加上相應(yīng)的導(dǎo)入鏈接。

首先沒(méi)有vue.config.js需要在項(xiàng)目根目錄創(chuàng)建

具體代碼如下：

constcdn={

//忽略打包的第三方庫(kù)

externals:{

vue:'Vue',

"element-ui":"ELEMENT",

'vue-router':'VueRouter',

vuex:'Vuex',

axios:'axios',

moment:"moment",

echarts:"echarts"

//通過(guò)cdn方式使用

js:[

'/vue/2.6.10/vue.runtime.min.js',

'/vue-router/3.1.2/vue-router.min.js',

'/vuex/3.1.1/vuex.min.js',

'/axios/0.19.0/axios.min.js',

'/moment.js/2.24.0/moment.min.js',

'/echarts/3.7.1/echarts.min.js',

"/ajax/libs/element-ui/2.8.2/index.js",

css:["/element-ui@2.8.2/lib/theme-chalk/index.css"],

module.exports={

publicPath:'/CRM/dist/',

//publicPath:'./',

chainWebpack:config={

config.plugin('html').tap(args={

args[0].cdn=cdn

returnargs

config.plugins.delete('prefetch')

//打包忽略第三方庫(kù)

configureWebpack:{

externals:cdn.externals

然后在pulic/index.html模板相應(yīng)位置上加上（添加位置自己看著來(lái)）

//下列是css,script的話(huà)注釋換一下，仔細(xì)看很好理解，config配置是添加一個(gè)cdn變量，然后在模板中遍歷添加

%for(variinhtmlWebpackPlugin.options.cdnhtmlWebpackPlugin.options.cdn.css){%

linkhref="%=htmlWebpackPlugin.options.cdn.css[i]%"rel="externalnofollow"rel="stylesheet"

!--scriptsrc="%=htmlWebpackPlugin.options.cdn.js[i]%"crossorigin="anonymous"/script--

%}%

使用CDN還會(huì)有另外一個(gè)好處，就是可以提高打包速度。

壓縮請(qǐng)求資源

一般我們部署到服務(wù)器會(huì)使用nginx來(lái)做代理服務(wù)器，所有的請(qǐng)求都通過(guò)nginx轉(zhuǎn)發(fā)。我們可以通過(guò)配置nginx，開(kāi)啟gzip。

server{

gzipon;

gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/javascripttext/xmltext/css;

通過(guò)上面的配置，每次瀏覽器向服務(wù)器請(qǐng)求資源時(shí)，服務(wù)器就會(huì)先把資源進(jìn)行壓縮后再返給瀏覽器，瀏覽器接收到后再解壓處理。這樣就可以很大的提高靜態(tài)資源的下載速度。

但還有一點(diǎn)，就是這樣的話(huà)，瀏覽器每次向服務(wù)器請(qǐng)求時(shí)，服務(wù)器都會(huì)執(zhí)行一次壓縮操作，當(dāng)請(qǐng)求量很大時(shí)，壓縮這個(gè)操作也會(huì)影響到服務(wù)器的響應(yīng)速度，所以我們可以直接在打包時(shí)，就將文件打包成壓縮包。這樣不用服務(wù)器頻繁的去打包：

安裝依賴(lài)：compression-webpack-plugin

npminstallcompression-webpack-plugin--save-dev

vue.config.js修改：

constCompressionPlugin=require('compression-webpack-plugin');

constproductionGzipExtensions=/\.(js|css|json|txt|html|ico|svg)(\.*)$/i;

module.exports={

publicPath:'./',

productionSourceMap:false,

configureWebpack:{...},

chainWebpack:config={

config.resolve.alias.set('@',resolve('src'));

if(process.env.NODE_ENV==='production'){

config.plugin('compressionPlugin')

.use(newCompressionPlugin({

filename:'[path].gz[query]',

algorithm:'gzip',

test:productionGzipExtensions,

threshold:10240,

minRatio:0.8,

deleteOriginalAssets:true

}));

nginx配置

server{

gzip_staticon;

gzipon;

gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/javascripttext/xmltext/css;

一.http請(qǐng)求次數(shù)太多

所有的事情都有個(gè)度，也就是我們所說(shuō)的物極必反。我們采用按需加載，代碼分割打包后，當(dāng)項(xiàng)目越來(lái)越大，模塊越來(lái)越多的時(shí)候，項(xiàng)目打包后，我們就會(huì)發(fā)現(xiàn)會(huì)生成很多的文件。對(duì)于前端性能而言，雖然每個(gè)文件更小了，但可能意味著更多的網(wǎng)絡(luò)連接建立和關(guān)閉的開(kāi)銷(xiāo)，因此在前端優(yōu)化的實(shí)踐中，通常需要在文件數(shù)量和單個(gè)文件大小之間取得平衡。這里，我們可以利用webpack提供的插件MinChunkSizePlugin,通過(guò)合并小于minChunkSize大小的chunk，將chunk體積保持在指定大小限制以上

解決方案：

vue.config.js配置

module.exports={

publicPath:'./',

productionSourceMap:false,

configureWebpack:{

plugi