CDN靜態(tài)資源加速&Lighthouse性能監(jiān)測(cè)
本文主要介紹了cdn加速在項(xiàng)目中的實(shí)現(xiàn)，以及使用Lighthouse對(duì)前端性能指標(biāo)進(jìn)行監(jiān)測(cè)打分。
Lighthouse簡(jiǎn)介
Lighthouse是谷歌開發(fā)并開源的web性能測(cè)試工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量，可以將其作為一個(gè)Chrome擴(kuò)展程序運(yùn)行，或從命令行運(yùn)行。只需要為其提供一個(gè)需要審查的地址，Lighthouse就會(huì)對(duì)頁面進(jìn)行一連串的測(cè)試，生成一個(gè)有關(guān)頁面性能的報(bào)告。
在瀏覽器的調(diào)試工具中默認(rèn)就存在lighthouse選項(xiàng)，只需要切換至lighthouse，在右側(cè)的選項(xiàng)區(qū)選中需要的選項(xiàng)。點(diǎn)擊生成報(bào)告。
從報(bào)告中可以看出某網(wǎng)站的首屏?xí)r間是0.6s，可交互時(shí)間是1.5s，總阻塞時(shí)間是10ms。最大繪制時(shí)間是1s。通過這些性能指標(biāo)就可以看到在哪方面存在性能瓶頸。
在下方會(huì)對(duì)渲染進(jìn)行拍照截圖，如果空白頁面較多也能體現(xiàn)網(wǎng)站白屏?xí)r間過長。下面還會(huì)給一些優(yōu)化建議。比如某些資源過大，加載時(shí)間過長等，當(dāng)然這些建議不并一定都是對(duì)的，只是一些建議。
接下來我們就使用Lighthouse對(duì)項(xiàng)目進(jìn)行監(jiān)測(cè)衡量，使用cdn靜態(tài)資源，對(duì)項(xiàng)目進(jìn)行優(yōu)化加速。
CDN靜態(tài)資源加速實(shí)現(xiàn)
vue3 項(xiàng)目代碼改造
// vue.config.js
const CDN = {
js: [
'https://unpkg.com/vue@3.2.13/dist/vue.global.prod.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.js',
'https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js',
'https://unpkg.com/pinia@2.0.13/dist/pinia.iife.prod.js',
'https://unpkg.com/axios@0.26.1/dist/axios.min.js',
'https://unpkg.com/element-plus@2.1.7/dist/index.full.min.js',
],
css: [
'https://unpkg.com/element-plus@2.1.7/dist/index.css',
]
}
const objExternals = {
vue: 'Vue',
'element-plus': 'ElementPlus',
'vue-router': 'VueRouter',
'pinia': 'Pinia',
'axios': 'axios'
}
module.exports = {
chainWebpack: config => {
// 配置，將當(dāng)前頁定義的cdn值傳到主頁面（index.html）
config.plugin('html').tap(args => {
// 這里我是除本地環(huán)境，其余均使用CDN，可自己選擇是否配置
args[0].cdn = process.env.NODE_ENV === 'development' ? {} : CDN
return args;
});
},
configureWebpack: {
...
// 定義webpack打包配置
externals: process.env.NODE_ENV === 'development' ? {} : objExternals,
},
}
// public文件夾下 index.html 添加如下代碼
<head>
...
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</head>
行云環(huán)境下相關(guān)配置改造
行云子應(yīng)用編譯后只生成index.js，沒有index.html，新版的plugin-webpack支持修改index.js，可以優(yōu)先加載外部資源。
but！結(jié)果是失敗的，外部資源加載到最外層的行云基座上，vue版本、全局的css樣式等會(huì)直接影響到所有的行云子應(yīng)用。需要后續(xù)行云優(yōu)化，增加沙箱隔離。
所以，這里只做一個(gè)演示，而不做更深層次的優(yōu)化完善。
文檔鏈接： JModule
// plugin-webpack 依賴需升級(jí)到0.4.4版本
// "@jmodule/plugin-webpack": "^0.4.4",
// .jmodule.conf.js
const cdnJsList = [
'https://unpkg.com/vue@3.2.13/dist/vue.global.prod.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.js',
'https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js',
'https://unpkg.com/pinia@2.0.13/dist/pinia.iife.prod.js',
'https://unpkg.com/axios@0.26.1/dist/axios.min.js',
'https://unpkg.com/element-plus@2.1.7/dist/index.full.min.js',
]
const cdnCssList = [
'https://unpkg.com/element-plus@2.2.17/dist/index.css'
]
module.exports = {
mode: 'modules',
assetsModifier: (assetsJson) => {
assetsJson.js = cdnJsList.concat(assetsJson.js)
assetsJson.css = cdnCssList.concat(assetsJson.css)
return assetsJson
}
};
CDN加速改造前后數(shù)據(jù)對(duì)比
使用的項(xiàng)目： 流水線-鏡像市場(chǎng)
我們從三個(gè)維度進(jìn)行衡量：打包大小、打包用時(shí)、lighthouse性能評(píng)分
改造前
打包大小
打包用時(shí)
// 各模塊打包計(jì)時(shí)插件 speed-measure-webpack-plugin
// 下載依賴
npm i speed-measure-webpack-plugin
// vue.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
...
}),
}
打包結(jié)果如圖，統(tǒng)計(jì)五次次打包數(shù)據(jù)：
lighthouse性能評(píng)分
獨(dú)立域名
行云子應(yīng)用
改造后
打包大小
打包用時(shí)
lighthouse性能評(píng)分
獨(dú)立域名
行云子應(yīng)用
總結(jié)
從上面數(shù)據(jù)可以看出，經(jīng)過CDN加速后，項(xiàng)目打包大小減小80%左右，打包用時(shí)減少50%以上，lighthouse性能評(píng)分也有明顯提高。
lighthouse是一款非常好的web性能測(cè)試工具，通過監(jiān)測(cè)打分并給出相應(yīng)的優(yōu)化建議，我們可以根據(jù)其建議對(duì)項(xiàng)目進(jìn)行性能優(yōu)化。
作者：京東零售 劉慧斌
來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請(qǐng)注明來源
浙公網(wǎng)安備 33010602011771號(hào)