前端性能指标优化

一、性能优化目的

以500Audio为例进行性能优化，来提高用户使用体验和谷歌对网站的评分。

上图为谷歌官方的指标评分模型，可见CLS、TBT、TTI、LCP占比最高，也是主要考虑的地方

（测试工具：Lighthouse、PageSpeed，建议在无痕模式下检测）

优化方向：减少请求次数、减小资源大小、提高响应和加载速度

二、性能优化方法

1、图片优化

1. 使用雪碧图将多张小图合并成一张大图，从而减少http请求数,使用小体积和png格式的图片。

2. 图片体积压缩，图片懒加载。注：首屏部分位置图片需要使用预加载提高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、资源大小压缩

1. 开启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">