一、性能优化目的
以500Audio为例进行性能优化,来提高用户使用体验和谷歌对网站的评分。
上图为谷歌官方的指标评分模型,可见CLS、TBT、TTI、LCP占比最高,也是主要考虑的地方
(测试工具:Lighthouse、PageSpeed,建议在无痕模式下检测)
优化方向:减少请求次数、减小资源大小、提高响应和加载速度
二、性能优化方法
1、图片优化
使用雪碧图将多张小图合并成一张大图,从而减少http请求数,使用小体积和png格式的图片。
图片体积压缩,图片懒加载。注:首屏部分位置图片需要使用预加载提高LCP指标。
head () {
let preloadImages = []
if (this.albums && this.albums.length) {
this.albums.forEach((t, i) => {
t.album_list.forEach((g, j) => {
if (i < 2 && j < 4) {
preloadImages.push({
rel: 'preload',
as: 'image',
href: !this.isMobile ? this.imageView2(g.cover_url, 428, 428) : this.imageView2(g.cover_url, 280, 280)
})
}
})
})
}
return {
link: preloadImages
}
}
在head钩子中使用将需要的图片通过link标签中,设置rel="preload"属性预加载。
2、资源大小压缩
开启Gzip压缩
npm install compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin');
build:{
plugins:[
new CompressionPlugin({
test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false, // 是否删除原文件
minRatio: 0.8
}),
]
}
通过npm下载插件,在nuxt.config.js中配置,将js、css文件压缩成.gz文件格式
(注:使用该插件需要在nginx中同步配置,否则浏览器无法解析)
2. 分包
build:{
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '-',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
3. 使用摇树和多进程缓存去除未使用的代码
npm install terser-webpack-plugin
build:{
extend(config, { isDev, isClient }) {
if (!isDev && isClient) {
config.optimization.minimize = true
config.optimization.usedExports = true //开启Tree Shaking
config.optimization.minimizer = [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
exclude: /node_modules/,
parallel: true, //开启缓存
sourceMap: true, //生成源代码映射文件
cache: true,
terserOptions: {
compress: {
drop_console: true,
},
},
}),
];
}
},
}
terser-webpack-plugin是一个用于压缩JavaScript代码的Webpack插件,可以将JavaScript代码最小化,并删除无用的代码,从而减小代码体积,提高页面加载速度。
Tree-shaking实现的前提是必须要使用ES Modules去组织我们的代码,也就是说由webpack打包的代码必须使用ESM。
3、提高响应和加载速度
减少http请求,设置http缓存,使用更快的http2请求。
脚本与DOM/其它脚本的依赖关系很强:对<script>设置defer。
脚本与DOM/其它脚本的依赖关系不强:对<script>设置async。
网页的主要资源使用preload/prefetch 可控制 HTTP 优先级,从而达到关键请求更快响应的目的。
<link rel="prefetch" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
dns-prefetch,可对主机地址的 DNS 进行预解析。
<link rel="dns-prefetch" href="https://js.500audio.com">