SPA首屏加载速度慢的怎么解决（gzip压缩）

一、什么是首屏加载

首屏时间（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,
};

二、加载慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下：

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

三、解决方案

常见的几种SPA首屏优化方式

1. 减小入口文件积
2. 静态资源本地缓存
3. 路由懒加载
4. 异步组件加载
5. UI框架按需加载
6. 图片资源的压缩
7. 组件重复打包
8. 开启GZip压缩
9. 使用SSR

开启GZip压缩

打包时使用插件后，会在打包出的资源处额外增加同一文件的 *.gz 格式。

将资源放到服务器，并且服务器配置支持 gzip 后，客户端请求资源的 Request Headers 中若有 Accept-Encoding: gzip, deflate 则会请求 gzip 文件，服务端的 Response Headers 中则会有 Content-Encoding: gzip 。

如果客户端和服务端任意一方不支持 gzip，则会请求正常的 html/css/js 文件。

安装compression-webpack-plugin

npm install compression-webpack-plugin -D

webpack.config.js中配置

// webpack.config.js

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

module.exports = {
  plugins: [
    new CompressionPlugin(),
  ],
};

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

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

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

异步组件加载

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。这样渲染页面的时候就不会把页面用的所有组件渲染，只有使用对应组件时才会渲染。Vue 提供了 defineAsyncComponent 方法来实现此功能：

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>