很多兄弟都在用Vite，但是如果你是前端的leader或者是团队的核心，你要考虑的一个问题就是性能优化。Vite在开发环境中的表现已经很不错了。今天主要讲一下生产环境的优化。其实方法和Webpack差不多，只是在构建Vite的时候用到了Rollup。学习Vite最好的方式就是抛开脚手架工具，单独使用。方法我在介绍章节已经讲过了，这里不再赘述。那还等什么，赶快开始吧！分包策略默认情况下，当浏览器重复请求同名静态资源时，会直接使用缓存的资源。利用这种机制，我们可以将不经常更新的代码打包成一个JS文件，可以减少HTTP请求，减轻服务器压力。以lodash为例：使用npmilodash安装lodash，然后在main.js中写入如下代码：//src/main.jsimport{cloneDeep}from'lodash'constobj=cloneDeep({})打包结果：project代码和依赖模块打包成一个JS文件。接下来我们配置分包，修改底层Rollup配置：//vite.config.jsimport{defineConfig}from'vite'exportdefaultdefineConfig({build:{rollupOptions:{output:{manualChunks:id{//将node_modules的打包代码单独打包成一个JS文件单独一个JS文件。这样即使我们修改了main.js中的代码重新打包，依赖文件vendor.528a7280.js也不会改变，浏览器也不会再次发起对这个文件的请求。如果依赖的模块很多，性能会不会有很大的提升？treeshakingtreeshaking也被称为“treeshaking优化”。简单来说，就是在保证代码运行结果不变的前提下，去掉无用的代码。在Vue3中，引入了很多API来支持treeshaking优化。也就是说，只打包自己用到的API，不用的就忽略掉。Vue3默认会使用Rollup进行treeshaking，无需额外配置。但是有一个条件，必须是ES6module模块。还是上面的例子：//src/main.jsimport{cloneDeep}from'lodash'constobj=cloneDeep({})由于lodash是使用CommonJS规范的模块，所以无法进行treeshaking，Vue会打包整个lodash依赖.整个依赖文件的大小为78.64KB。然后我们使用ESM版本的loadsh进行对比：npmilodash-es//src/main.jsimport{cloneDeep}from'lodash-es'constobj=cloneDeep({})打包结果如下：可以看到那依赖体积瞬间就变成了13.23KB，是不是小了很多？所以我们在选择第三方库的时候，尽量使用ESM版本的，这样可以提升很多性能！gzip压缩gzip是一种非常常见的压缩格式。使用gzip压缩可以大大减少代码大小并提高网络性能。启用gzip比较简单，使用一个插件即可：viteCompression()]})打包结果如下：经过gzip压缩后，vendor.6fd516d3.js文件从13.23KB缩小到4.62KB，文件大小缩小近2/3。这不是很好吗？接下来是后端同学的工作：在请求静态资源时，如果有对应的gzip文件，直接将gzip内容返回给前端，并设置一个响应头content-encoding:gzip。完整的逻辑是，我们需要将浏览器支持的压缩类型传递给服务端，并在请求头中设置accept-encoding:gzip,deflate,br，但是浏览器通常会帮我们做这些。然后服务器根据浏览器支持的类型设置响应头content-encoding:gzip，告诉浏览器如何解压。注意：由于浏览器解压也需要时间，如果代码量不是很大，不建议使用gzip压缩。CDN加速内容分发网络（ContentDeliveryNetwork，简称CDN）是让用户向最近的服务器请求资源，以提高网络请求的响应速度。通常我们请求依赖模块使用CDN，而请求项目代码还是使用自己的服务器。还是以lodash为例：//src/main.jsimport_from'lodash'constobj=_.cloneDeep({})使用CDN也比较简单，一个插件就可以搞定：npmivite-plugin-cdn-import-D//vite.config.jsimport{defineConfig}from'vite'importviteCDNPluginfrom'vite-plugin-cdn-import'exportdefaultdefineConfig({plugins:[viteCDNPlugin({//需要CDN的模块加速模块：[{name:'lodash',var:'_',path:`https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`}]})]})构建成功后，Vite会自动帮我们通过script标签将cdn资源插入到html中：请求lodash资源会产生加速buff，项目体积会大大减小！图片压缩根据项目对清晰度的要求，我们可以使用vite-plugin-imagemin插件对图片进行适当的压缩：npmivite-plugin-imagemin-D//vite.config.jsimport{defineConfig}from'vite'从'vite-plugin-imagemin'导出默认defineConfig({plugins:[viteImagemin({gifsicle:{optimizationLevel:7,interlaced:false},optipng:{optimizationLevel:7},mozjpeg:{质量：20}，pngquant：{质量：[0.8，0.9]，速度：4}，svgo：{插件：[{名称：'removeViewBox'}，{名称：'removeEmptyAttrs'，活动：假}]}}）]})不同格式的文件配置也不同。具体可以参考github：vite-plugin-imagemin构建分析和依赖模块大小比例分析，可以让我们更有针对性地优化大小。我们通常使用rollup-plugin-visualizer插件进行构建分析，方法比较简单：npminstallrollup-plugin-visualizer-D//vite.config.jsimport{defineConfig}from'vite'import{visualizer}from'rollup-plugin-visualizer';exportdefaultdefineConfig({plugins:[//将可视化插件放在最后visualizer()]})npmrunbuild，构建成功后会在里面生成一个stats.html根目录，打开分析结果页面就可以看到。我们还可以通过左上角的exclude和include输入框过滤依赖的模块。同时，将鼠标移入各个模块，可以看到详细的分析数据：总结好了，今天的分享就到这里。如果你的项目已经在使用Vite，不妨试试上面的方案，看看项目会不会变得更顺畅。
