CDN静态资源加速&Lighthouse性能监测

原创
01/16 10:33
阅读数 27
本文主要介绍了cdn加速在项目中的实现,以及使用Lighthouse对前端性能指标进行监测打分。
 
Lighthouse简介
Lighthouse是谷歌开发并开源的web性能测试工具,用于改进网络应用的质量,可以将其作为一个Chrome扩展程序运行,或从命令行运行。只需要为其提供一个需要审查的地址,Lighthouse就会对页面进行一连串的测试,生成一个有关页面性能的报告。
在浏览器的调试工具中默认就存在lighthouse选项,只需要切换至lighthouse,在右侧的选项区选中需要的选项。点击生成报告。
 
 
 
 
 
 
从报告中可以看出某网站的首屏时间是0.6s,可交互时间是1.5s,总阻塞时间是10ms。最大绘制时间是1s。通过这些性能指标就可以看到在哪方面存在性能瓶颈。
 
 
 
 
在下方会对渲染进行拍照截图,如果空白页面较多也能体现网站白屏时间过长。下面还会给一些优化建议。比如某些资源过大,加载时间过长等,当然这些建议不并一定都是对的,只是一些建议。
 
 
 
 
 
接下来我们就使用Lighthouse对项目进行监测衡量,使用cdn静态资源,对项目进行优化加速。
 
CDN静态资源加速实现
vue3 项目代码改造
// 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 => {
// 配置,将当前页定义的cdn值传到主页面(index.html)
config.plugin('html').tap(args => {
// 这里我是除本地环境,其余均使用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>
 
行云环境下相关配置改造
行云子应用编译后只生成index.js,没有index.html,新版的plugin-webpack支持修改index.js,可以优先加载外部资源。
but!结果是失败的,外部资源加载到最外层的行云基座上,vue版本、全局的css样式等会直接影响到所有的行云子应用。需要后续行云优化,增加沙箱隔离。
所以,这里只做一个演示,而不做更深层次的优化完善。
文档链接: JModule
// plugin-webpack 依赖需升级到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加速改造前后数据对比
使用的项目: 流水线-镜像市场
我们从三个维度进行衡量:打包大小、打包用时、lighthouse性能评分
改造前
打包大小
 
 
 
 
打包用时
// 各模块打包计时插件 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({
...
}),
}
打包结果如图,统计五次次打包数据:
 
序号(次)
时间(s)
1
32.79
2
30.91
3
27.68
4
27.94
5
32.72
 
lighthouse性能评分
独立域名
 
 
 
 
行云子应用
 
 
 
 
改造后
打包大小
 
 
 
打包用时
序号(次)
时间(s)
1
15.064
2
14.43
3
13.05
4
12.19
5
13.87
 
lighthouse性能评分
独立域名
 
 
 
 
 
行云子应用
 
 
 
 
总结
从上面数据可以看出,经过CDN加速后,项目打包大小减小80%左右,打包用时减少50%以上,lighthouse性能评分也有明显提高。
lighthouse是一款非常好的web性能测试工具,通过监测打分并给出相应的优化建议,我们可以根据其建议对项目进行性能优化。
 

作者:京东零售 刘慧斌

来源:京东云开发者社区 转载请注明来源

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部