⚡️使用Vite
前段时间，将练习了时长两年半的react项目脚手架换成vite了，过程如下
首先使用vite创建基础项目框架
npm create vite@latest my-vue-app --template react-ts
将src工作目录直接拷贝过来
接着配置常用的路径解析alias
// vite-config,ts alias: [ ...( Object.entries({ '@': path.resolve('src'), }).map(([key, val]) => ({ find: key, replacement: val })) ), ], extensions: [".js", ".ts", ".tsx", ".jsx", ".d.ts"],
此时页面可以访问了，但是还是会有ts相关报错，
只需要在tsconfig.json里添加如下配置：
"paths": { "@/*": ["./src/*"] },
为了使ci/cd可以正常进行，还需要将项目默认打包默认目录从dist换成build
// vite-config,ts export default defineConfig({ build: { outDir: './build', } })
整个过程很快，
性能优化过程
接下来我执行了打包命令，部署在服务器上看看
在没有任何优化情况下，包体积为6.7M，比webpack版包体积小了0.4M
部署之后，vite版lighthouse的性能得分59分
通过分析，发现是因为没有压缩，大文件太多，加载过慢导致的，所以接下来，我们进行压缩文件。
压缩配置
import viteCompression from 'vite-plugin-compression' // https://vitejs.dev/config/ export default defineConfig({ build: { outDir: './build', rollupOptions: { plugins: viteCompression({ verbose: true, // 是否在控制台中输出压缩结果 disable: false, threshold: 10240, // 阈值，单位为b algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw'] ext: '.gz', // 格式 deleteOriginFile: false // 是否清除源文件，简易这里保留 }) } }, // ... })
❝并不是所有的nginx都带有 gzip 模块，所以最好保留源文件，以备不时之需
❞
打包之后
同时需要，nginx需要开启压缩识别，否则无效。
server { # 其他配置 gzip on; gzip_comp_level 5; gzip_min_length 256; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 其他配置 }
通过压缩文件优化后，性能有了明显提升。
❝我的项目没有图片，所以没有使用压缩图片的插件，如果需要可以使用vite-plugin-imagemin
❞
性能比较
而webpack版的lighthouse的性能得分73分
webpack 版已经完成了代码压缩、代码分割、路由懒加载。
对比两个版本，webpack 的 FCP 指标十分优秀，Vite 的 TBT 指标很健康。
虽然，目前来看两者差距不大。但是vite的优势很明显，
使用默认配置加上代码压缩，可以比webpack优化配置之后更好一点。
思考
此时影响的因素主要请求链的长度过长
❝翻译：下面的关键请求链显示了哪些资源是以高优先级加载的。考虑减少链的长度，减少资源的下载大小，或者推迟不必要资源的下载以提高页面负载。
❞
我们可以看到上面的请求链接，好几个都是只有几kb的小文件。而这些小文件是外层index文件的依赖文件，所以会造成阻塞，小文件小文件众多阻塞的时间就越久。
vite 将文件根据路由切割成多个子模块，每个模块的文件来自于不同的依赖包的子集。并且通过import的方式，引入到主文件中。
如果我们在小文件引入前，将小文件进行合并，就可以有效缩短链长度，从而更进一步的提高性能。目前还没有类似的插件。
今天的分享就到这里了，感谢你的阅读！
