首页 > 其他分享 >CDN静态资源加速&Lighthouse性能监测

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

时间:2024-01-16 10:46:26浏览次数:26  
标签:index Lighthouse vue unpkg 静态 CDN js https com

本文主要介绍了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/[email protected]/dist/vue.global.prod.js',

'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.js',

'https://unpkg.com/[email protected]/lib/index.iife.js',

'https://unpkg.com/[email protected]/dist/pinia.iife.prod.js',

'https://unpkg.com/[email protected]/dist/axios.min.js',

'https://unpkg.com/[email protected]/dist/index.full.min.js',

],

css: [

'https://unpkg.com/[email protected]/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/[email protected]/dist/vue.global.prod.js',

'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.js',

'https://unpkg.com/[email protected]/lib/index.iife.js',

'https://unpkg.com/[email protected]/dist/pinia.iife.prod.js',

'https://unpkg.com/[email protected]/dist/axios.min.js',

'https://unpkg.com/[email protected]/dist/index.full.min.js',

]

const cdnCssList = [

'https://unpkg.com/[email protected]/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({

...

}),

}

打包结果如图,统计五次次打包数据:

lighthouse性能评分

独立域名

行云子应用

改造后

打包大小

打包用时

lighthouse性能评分

独立域名

行云子应用

总结

从上面数据可以看出,经过CDN加速后,项目打包大小减小80%左右,打包用时减少50%以上,lighthouse性能评分也有明显提高。

lighthouse是一款非常好的web性能测试工具,通过监测打分并给出相应的优化建议,我们可以根据其建议对项目进行性能优化。

作者:京东零售 刘慧斌

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

标签:index,Lighthouse,vue,unpkg,静态,CDN,js,https,com
From: https://www.cnblogs.com/jingdongkeji/p/17967090

相关文章

  • 引用CDN内容的方法总结
    引用CDN内容的方法总结 1.1.1摘要CDN相信大家都听说过,甚至使用过相关的技术,也许有些人会回答“没有听说过和使用过该技术”,真的是这样吗?CDN的全称是ContentDeliveryNetwork,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近......
  • 海外融合CDN之火伞云
    在当今互联网全球化的时代,出海业务已经成为许多企业的必然选择。在海外市场上,快速、稳定的内容传输对于企业的成功至关重要。然而,如何合理的运用多家CDN供应商的资源实现智能化的调度,以及如何与业务更紧密地结合起来,从而在使用和接入上既能简便易用,又能满足业务的敏捷开发需求,这是......
  • 在CentOS上设置和管理静态HTTP网站的版本控制
    在CentOS上设置和管理静态HTTP网站的版本控制是一项重要的任务,它可以帮助您跟踪和回滚对网站所做的更改,确保数据的一致性和完整性。以下是在CentOS上设置和管理静态HTTP网站的版本控制的步骤:1. 安装版本控制系统在CentOS上安装Git或其他版本控制系统,确保已正确配置并可正常使用。2......
  • 确保CentOS系统中的静态HTTP服务器的数据安全
    确保CentOS系统中的静态HTTP服务器的数据安全是一项重要的任务,它有助于保护网站免受未经授权的访问、数据泄露和其他安全威胁。以下是一些关键步骤和最佳实践,以确保CentOS系统中静态HTTP服务器的数据安全:1. 限制访问权限确保只有授权用户可以访问CentOS系统中的静态HTTP服务器。限......
  • 在CentOS中,对静态HTTP服务的性能监控
    在CentOS中,对静态HTTP服务的性能监控和日志管理是确保系统稳定运行和及时发现潜在问题的关键。以下是对这一主题的详细探讨。性能监控1. 使用工具监控:top、htop、vmstat、iostat等工具可以用来监控CPU、内存、磁盘I/O等关键性能指标。这些工具可以实时显示系统资源的使用情况,帮助......
  • CentOS系统下静态HTTP服务的安全性考虑
    在CentOS系统下提供静态HTTP服务时,安全性是首要考虑的问题。由于Web应用程序常常会面临各种安全威胁,如恶意 、数据泄露和拒绝服务 等,因此需要采取一系列措施来确保服务的安全性。1.输入验证与过滤对所有用户输入进行严格的验证和过滤是至关重要的。确保应用程序对所有输入数据进......
  • 使用CentOS搭建高性能静态HTTP服务器
    在互联网应用中,静态内容是广泛存在的,例如HTML页面、图片、视频等。为了提供高效、稳定和安全的静态内容服务,我们可以使用CentOS来搭建高性能的静态HTTP服务器。1.选择合适的软件Nginx和Apache是两个流行的HTTP服务器软件。Nginx以其高效、轻量级和快速的性能而著称,特别适合于提供......
  • 【C++/Qt】QLCDNumber-电子时钟实战
    头文件:#ifndefDIGITALCLOCK_H#defineDIGITALCLOCK_H#include<QLCDNumber>classdigitalClock:publicQLCDNumber{Q_OBJECTpublic:digitalClock(QWidget*parent=0);protected:voidmousePressEvent(QMouseEvent*event);//鼠标点击事件void......
  • XCODE IOS 静态链接库替换升级
    XCODE 版本15.2. 一个很久需求没更新的IOS应用,近来有新需求要开发。拉下代码运行,出现了个BAD_ACCESS错误。出错的位置位于一个调用的第三方的.a静态库内部。因为调用代码并没有修改,很容易想到可能XCODE相关升级,导致的问题。由于是第三方的一个.a动态库,兼容问题,......
  • 静态绑定 动态绑定
        在面向对象编程中,静态绑定和动态绑定是两种方法,用于确定程序调用哪个函数(特别是当使用继承和多态时)。这两种方法本质上是根据对象的类型来决定函数调用如何解析。静态绑定(StaticBinding)静态绑定,又称为早期绑定,是编译时完成的函数调用解析过程。编译器根据调用函数时使......