---

theme: channing-cyan

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

近期为了上线 Module Federation ，发现项目 Vue-cli 版本太低用不了，就顺便把应用用 Vite 重新配置了下，发现打包后页面加载速度不理想，故开启一段优化之旅

目标和指标

既然要优化，那就必须有目标，能量化

目标

本次优化目标

• 正常网速下，2s内加载完成

指标

关于指标，这里简单介绍下常见的优化指标

• FCP（First Contentful Paint）：白屏时间（第一个文本绘制时间）
• Speed Index：首屏时间
• TTI（Time To Interactive）: 第一次可交互的时
• lighthouse score：Chrome浏览器审查工具性能评分

开始性能分析

我们大部分的性能分析都可以借助 Chrome 完成，大致可以分为

• Network 分析
• Lighthouse 分析
• Bundle 分析

Network 分析

从网络加载状态看可以发祥有一个 1.9MB 的 index.js 文件占用了比较大的加载时间，阻塞了其它资源的加载，是一个优化点

Lighthouse 分析

使用

结果

前面我们罗列的一些指标都可以在这里直观的看到数值，记录下来为我们调优后进行参考指标对比

Bundle 分析

因为使用的是 vite，借助插件 rollup-plugin-visualizer，来进行 bundle 分析

安装

pnpm i rollup-plugin-visualizer -D

引入

import { visualizer } from 'rollup-plugin-visualizer'
​
const plugins = [vue(), visualizer()]

打包之后会在项目根目录生成 stats.html 文件，打开

分析可以看出之前 index.js 加载慢很大一部分原因是因为加载了 echarts 包，这就给我门优化提供了方向

开始优化

通过之前的分析，主要的加载优化方向还是大体积文件瘦身（之前已经做过 gzip 的优化，如果没做过的同学强烈推荐，可以极大提升加载速度）

GZIP 配置

这里顺便介绍下 vite 的 GZIP 配置

安装 vite-plugin-compression

npm i vite-plugin-compression -D

修改 vite.config.js 配置

 import viteCompression from 'vite-plugin-compression'
 
 plugins: [vue(), viteCompression()]

打包后就会生成 gzip 文件了，但是服务端 nginx 还需要配置一下才能生效

http {
    gzip_static on;
    gzip_proxied any;
}

具体也可以看看我的这篇文章，有详细介绍

系统介绍浏览器缓存机制及前端优化方案

echarts 单独拆分

修改 vite.config.js 配置

build: {
    rollupOptions: {
        output: {
            manualChunks: {
                echarts: ['echarts']
            }
        }
    }
}

打包后 Index.js 体积变化(未压缩前)

Before: 4.49MB

After: 1.34MB

图片压缩

安装 vite-plugin-imagemin

npm i vite-plugin-imagemin -D

修改 vite.config.js 配置

import viteImagemin from "vite-plugin-imagemin"
​
plugins: [vue(), viteImagemin()]

打包后会生成压缩的图片，但是每次打包都会重新压缩一遍，比较浪费时间，如果不介意的话采用此方案也很简单，网上查了一下有使用本地压缩的方案，不过配置比较繁琐，就自己写了个插件，后续会有文章单独介绍，敬请关注

结果分析

Network 分析

加载时间 平均节省 1 秒

Lighthouse 分析

分数由 46 提升到 52

Bundle 分析

主包体积缩小 1 M 左右

总结

到此本次优化告一段路，基本达到预期效果，不过遗留了一些问题，像引用 video 插件相关的一些页面想用开头提到的组件联邦 Module Federation来做，但是加载时部分手机浏览器出现兼容问题未能完成，后续等解决了兼容问题在单独写一篇总结 ^-^