SPA 优化

哓番茄大约 6 分钟

SPA 优化

减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分：资源加载优化 和 页面渲染优化

首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

通过 DOMContentLoad 或者 performance 来计算出首屏时间

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime

// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};

原因分析

网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候，渲染内容堵塞了

可以通过 webpack 的可视化资源分析工具webpack-bundle-analyzer进行性能分析
命令安装pnpm i webpack-bundle-analyzer -D

在 webpack 的 dev 开发模式配置中

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
plugins: [new BundleAnalyzerPlugin()]

执行npm run build --report, 浏览器会自动打开分析结果

优化方式

路由懒加载

常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加

在 vue-router 配置路由的时候，采用动态加载路由的形式

routes:[
  path: 'Blogs',
  name: 'ShowBlogs',
  component: () => import('./components/ShowBlogs.vue')
]

以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件

UI 框架按需加载

在日常使用 UI 框架，例如 element-UI、或者 antd，我们经常性直接引用整个 UI 库,

import { Button, Input, Pagination } from 'element-ui'
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

组件重复打包

假设 A.js 文件是一个常用的库，现在有多个路由使用了 A.js 文件，这就造成了重复下载

解决方案：在 webpack 的 config 文件中，修改 CommonsChunkPlugin 的配置

minChunks: 3

minChunks为 3 表示会把使用 3 次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

图片资源处理

所有的图片资源都可以在tinypng网站上去压缩一下

iconfont
使用iconfont字体图标
CSS 图像精灵
使用 CSS 图像精灵，将多个图片转为一个图片，通过 background: url() x y来控制图片的显示隐藏

img base64
vue 配置图片小于8kb的自动转为 base64，减少图片 http 的请求
webpack 使用 url-loader对图片进行处理

  {
    // 问题：默认处理不了html中img图片
    // 处理图片资源
    test: /\.(jpg|png|gif)$/,
    // 使用一个loader
    // 下载 url-loader file-loader
    loader: 'url-loader',
    options: {
      // 图片大小小于8kb，就会被base64处理
      // 优点: 减少请求数量（减轻服务器压力）
      // 缺点：图片体积会更大（文件请求速度更慢）
      limit: 8 * 1024,
      // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
      // 解析时会出问题：[object Module]
      // 解决：关闭url-loader的es6模块化，使用commonjs解析
      esModule: false,
      // 给图片进行重命名
      // [hash:10]取图片的hash的前10位
      // [ext]取文件原来扩展名
      name: '[hash:10].[ext]'
    }
  }

开启 GZip 压缩

gizp 压缩是一种 http 请求优化方式，通过减少文件体积来提高加载速度。html、js、css 文件甚至 json 数据都可以用它压缩，可以减小 60%以上的体积。前端配置 gzip 压缩，并且服务端使用 nginx 开启 gzip，用来减小网络传输的流量大小。

拆完包之后，我们再用 gzip 做一下压缩安装 compression-webpack-plugin

使用 pnpm 在项目中下载pnmp i compression-webpack-plugin -D

在 vue.congig.js 中引入并修改 webpack 配置

const CompressionPlugin = require('compression-webpack-plugin')

plugins: [
  new CompressionWebpackPlugin({
    test: /\.js$|\.html$|\.css/, //匹配文件名
    threshold: 10240, //对超过10k的数据进行压缩
    deleteOriginalAssets: false, //是否删除原文件
  }),
]

启用 gzip 压缩打包之后，会变成下面这样，自动生成 gz 包。目前大部分主流浏览器客户端都是支持 gzip 的，就算小部分非主流浏览器不支持也不用担心，不支持 gzip 格式文件的会默认访问源文件的，所以不要配置清除源文件。

配置好之后，打开浏览器访问线上，F12 查看控制台，如果该文件资源的响应头里显示有 Content-Encoding: gzip，表示浏览器支持并且启用了 Gzip 压缩的资源

在服务器我们也要做相应的配置如果发送请求的浏览器支持 gzip，就发送给它 gzip 格式的文件

服务器是用 express 框架搭建的只要安装一下 compression 就能使用

const compression = require('compression')
app.use(compression()) // 在其他中间件使用之前调用

webpack 相关配置优化

使用 uglifyjs-webpack-plugin 插件代替 webpack 自带 UglifyJsPlugin 插件来压缩 JS 文件；生产环境关闭源码映射，一方面能减少代码包的大小，另一方面也有利于系统代码安全；清除打印日志和 debugger 信息；配置 SplitChunks 抽取公有代码，提升你的应用的性能
使用 mini-xss-extract-plugin 提取 CSS 到单独的文件, 并使用 optimize-css-assets-webpack-plugin 来压缩 CSS 文件。

SPA 优化

SPA 优化

首屏加载

原因分析

优化方式

路由懒加载

UI 框架按需加载

组件重复打包

图片资源处理

开启 GZip 压缩

webpack 相关配置优化

感知性能优化

loading 动画

首屏骨架加载

渐进加载图片