说到前端性能优化🚀，通过我个人的感觉总体的来说优化的本质就是优化文件的体积，体积小了加载就快了，当然前端性能不光是在体积方面，在代码层面需要去优化，本篇文章主要讲述的是Vite打包优化。
分包策略
因为浏览器的缓存策略，当请求的文件名不变时，会直接从缓存中获取文件，所以只要每次 main.js 中内容发生了变化，打包后的文件名中的 hash 值都会不一样。也就是说，当项目业务代码发生变化，例如 main.ts 中循环体内的内容发生了变化时，打包后的文件名就发生了变化，浏览器就会重新请求文件。但是这里的问题是，每次打包后的内容大部分都是 lodash 库的内容，它的内容是不会变化的（node_modules 中的代码都是不会变化的），我们只是更改了业务代码而已，会导致每次浏览器请求的文件都很大，很大的网络传输损耗。
分包策略就是为了解决这个问题，它会将一些不常规更新变化的文件进行单独打包处理。
在vite.config.js中配置
import {defineConfig} from 'vite'
module.exports= defineConfig({build: {sourcemap: false,minify: 'terser',chunkSizeWarningLimit: 1500,terserOptions: {// 去掉console和debuggercompress: {drop_console: true,drop_debugger: true}},rollupOptions: { // vite打包是通过rollup来打包的output: {manualChunks: (id) => {// 可以在这里打印看一下id的值，这里做个简单处理将node_modules中的包打包为vendor文件if(id.indexOf('node_modules') > -1) {return 'vendor'}}// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值entryFileNames: 'js/[name].[hash].js',// 用于命名代码拆分时创建的共享块的输出命名chunkFileNames: 'js/[name].[hash].js',// 用于输出静态资源的命名，[ext]表示文件扩展名assetFileNames: '[ext]/[name].[hash].[ext]',}}},
});
2. gzip压缩
安装 vite-plugin-compression
npm i vite-plugin-compression -D
在vite.config.js中配置
import { defineConfig } from 'vite'
import VitePluginCompression from 'vite-plugin-compression'export default defineConfig({build: {...},plugins: [...VitePluginCompression()]
})
3. CDN加速
分发策略里我们将依赖单独打成一个稳定的包。现在是另外一个场景：比如国内访问一些未被封的国外网站（例如 github、newsela 等）网站时，因为服务器在国外，所以浏览器打开这些网站时请求时间一般都会比较久。即使你分包了，但是如果这个包体积很大，访问时间还是会很长，因为是从国内访问国外了。
如果我们将其中一些依赖包经过 cdn 的方式访问，例如 Vue vue-router 这些包通过 cnd 的方式访问，那么这些包就会直接通过 cdn 地址的方式加载，而不是在我们的服务器上去请求，这样我们的项目包就会更小，页面响应就会更快。
安装 vite-plugin-cdn-import
npm install vite-plugin-cdn-import -D
在vite.config.js中配置
import { defineConfig } from 'vite'
import ViteCDNPlugin from 'vite-plugin-cdn-import'export default defineConfig({plugins: [ViteCDNPlugin({modules: [{name: 'lodash', // 包名var: '_', // 对应cdn包导出的变量，如jQuery导出的是$path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'}]})]
})
4. 图片压缩
安装vite-plugin-imagemin
npm install vite-plugin-imagemin -D
在vite.config.js中配置
import viteImagemin from "vite-plugin-imagemin"
import {defineConfig}from 'vite'
module.exports = defineConfig{plugins:[viteImagemin()]
})
