在使用vue3项目做的管理后台的时候，发现首屏加载的时间特别慢，在清除缓存的情况下，每次要加载4秒左右，非常影响用户体验，所以就要考虑对项目进行优化。
一 、gzip 代码压缩
在打包的时候，控制台会显示文件的大小和压缩后文件的大小。通过gzip压缩，能够把1987kb的文件压缩到463kb，文件大小相差非常之大。
修改vite.config.ts文件
1、下载插件
npm i vite-plugin-compression -D
2、修改vite配置
// gzip压缩
import viteCompression from "vite-plugin-compression";
....
plugins: [
vue(),
viteCompression(),
...
]
....
3、修改nginx配置
server
{
...
# 开启和关闭gzip模式
# 开启和关闭gzip模式
gzip on;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
...
}
二 、代码体积分析
打包出来的文件，有些体积特别大，严重影响加载的时间，需要用插件分析下，大的文件包含了什么文件，能不能拆分。
1 、下载插件
npm i rollup-plugin-visualizer -D
2、修改vite配置
import { visualizer } from 'rollup-plugin-visualizer'
....
plugins: [
vue(),
visualizer(),
...
]
....
3、查看分析结果
修改配置后打包，会在项目的根目录下生成一个 stats.html 的文件，双击打开，就可以看到每个文件的大小
三 、代码拆分
经过分析，发现index.js文件最大，里面包含了框架文件ant-design-vue，现在需要把这个框架文件拆分出来。
修改vite配置文件
...
build: {
rollupOptions: {
output: {
manualChunks: {
antDesignVue: ['ant-design-vue']
}
}
}
},
...
修改后打包，发现多了antDesignVue.js的文件，index.js文件大小明显减小了
