敞开成长之旅！这是我参加「日新计划 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 剖析

记一次Vite打包优化

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

Lighthouse 剖析

运用

记一次Vite打包优化

成果

记一次Vite打包优化

前面咱们罗列的一些方针都能够在这儿直观的看到数值，记录下来为咱们调优后进行参考方针比照

Bundle 剖析

因为运用的是 vite，凭借插件 rollup-plugin-visualizer，来进行 bundle 剖析

装置

pnpm i rollup-plugin-visualizer -D

引进

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

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

记一次Vite打包优化

剖析能够看出之前 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 剖析

记一次Vite打包优化

加载时刻 平均节约 1 秒

Lighthouse 剖析

记一次Vite打包优化

分数由 46 提高到 52

Bundle 剖析

记一次Vite打包优化

主包体积缩小 1 M 左右

总结

到此本次优化告一段路，根本到达预期作用，不过遗留了一些问题，像引用 video 插件相关的一些页面想用最初说到的组件联邦 Module Federation来做，但是加载时部分手机浏览器出现兼容问题未能完结，后续等处理了兼容问题在独自写一篇总结 ^-^