Vite性能篇掌握这些优化策略，一起纵享丝滑！

　　很多兄弟都在使用Vite了，但如果你是前端leader或者是团队核心的话，不得不可考虑的一个问题就是性能优化。Vite在开发环境性能已经非常不错了，今天我们主要聊聊生产环境的优化，其实方式和Webpack大同小异，只不过Vite构建时使用的是Rollup而已。
　　学习Vite最好是抛开脚手架工具，单独使用它。方法我在入门篇已经讲过，这里就不再赘述了。那么还等什么，开整！分包策略
　　默认情况下，浏览器重复请求相同名称的静态资源时，会直接使用缓存的资源。利用这个机制我们可以将不会经常更新的代码单独打包成一个JS文件，这样就可以减少HTTP请求，同时降低服务器压力。以lodash为例：npmilodash
　　安装lodash，然后在main。js中写入以下代码：srcmain。jsimport｛cloneDeep｝fromlodashconstobjcloneDeep（｛｝）
　　打包结果：
　　项目代码和依赖模块打包成了一个JS文件。接着我们来配置分包，修改底层的Rollup配置：vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛build：｛rollupOptions：｛output：｛manualChunks：id｛将nodemodules中的代码单独打包成一个JS文件if（id。includes（nodemodules））｛returnvendor｝｝｝｝｝｝）
　　打包结果如下：
　　可以看到依赖模块已经单独生成一个JS文件了。这样我们即使修改了main。js中的代码重新打包，依赖文件vendor。528a7280。js也不会发生变化的，对于这个文件，浏览器也不会再次发起请求。如果依赖模块很多的话，性能是不是有很大的提升呢？treeshaking
　　treeshaking也被称为摇树优化。简单来讲，就是在保证代码运行结果不变的前提下，去除无用的代码。Vue3中，许多ApI的引入都支持treeshaking优化。也就是说只打包你用到的API，忽略那些没有用到的。
　　Vue3会默认使用Rollup进行treeshaking，不需要额外进行配置。但有一个条件，必须是ES6module模块才行。还是上面那个例子：srcmain。jsimport｛cloneDeep｝fromlodashconstobjcloneDeep（｛｝）
　　由于lodash是使用CommonJS规范的模块，所以无法进行treeshaking，Vue会把整个lodash依赖打包进来。整个依赖文件的大小是78。64KB。
　　然后我们使用ESM版的loadsh对比一下：npmilodashessrcmain。jsimport｛cloneDeep｝fromlodashesconstobjcloneDeep（｛｝）
　　打包结果如下：
　　可以看到依赖体积瞬间变成了13。23KB，是不是一下小了很多。所以我们在选择第三方库时，要尽可能使用ESM版本，可以提升不少性能！gzip压缩
　　gzip是一种使用非常普遍的压缩格式。使用gzip压缩可以大幅减小代码体积，提升网络性能。开启gzip也比较简单，使用一个插件就可以了：npmiviteplugincompressionvite。config。jsimport｛defineConfig｝fromviteimportviteCompressionfromviteplugincompressionexportdefaultdefineConfig（｛plugins：〔viteCompression（）〕｝）
　　打包结果如下：
　　可以看到经过gzip压缩后，vendor。6fd516d3。js文件从13。23KB降到了4。62KB，文件体积缩小了近23，是不是很nice。接下来就是后端同学的工作了：当请求静态资源时，如果发现有对应的gzip的文件，直接把gzip内容返给前端，并且设置一个响应头contentencoding：gzip。
　　完整逻辑是，我们需要把浏览器支持的压缩类型传给服务端，在请求头中设置acceptencoding：gzip，deflate，br，只不过这一步浏览器通常帮我们都做了。然后服务端根据浏览器支持的类型，设置响应头contentencoding：gzip，告诉浏览器以何种方式进行解压。
　　注意：因为浏览器解压也需要时间，所以代码体积不是很大的话不建议使用gzip压缩。cdn加速
　　内容分发网络（ContentDeliveryNetwork，简称CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。通常我们请求依赖模块使用CDN，而请求项目代码依然使用自己的服务器。还是以lodash为例：srcmain。jsimportfromlodashconstobj。cloneDeep（｛｝）
　　使用CDN也比较简单，一个插件就可以搞定：npmiviteplugincdnimportDvite。config。jsimport｛defineConfig｝fromviteimportviteCDNPluginfromviteplugincdnimportexportdefaultdefineConfig（｛plugins：〔viteCDNPlugin（｛需要CDN加速的模块modules：〔｛name：lodash，var：，path：https：cdn。jsdelivr。netnpmlodash4。17。21lodash。min。js｝〕｝）〕｝）
　　构建成功后，Vite会自动帮我们将cdn资源通过script标签插入到html中：
　　这样请求lodash资源就会产生加速buff，而且项目体积也会大大减小！图片压缩
　　根据项目对清晰度的要求，我们可以使用vitepluginimagemin插件，对图片进行适当压缩：npmivitepluginimageminDvite。config。jsimport｛defineConfig｝fromviteimportviteImageminfromvitepluginimageminexportdefaultdefineConfig（｛plugins：〔viteImagemin（｛gifsicle：｛optimizationLevel：7，interlaced：false｝，optipng：｛optimizationLevel：7｝，mozjpeg：｛quality：20｝，pngquant：｛quality：〔0。8，0。9〕，speed：4｝，svgo：｛plugins：〔｛name：removeViewBox｝，｛name：removeEmptyAttrs，active：false｝〕｝｝）〕｝）
　　不同格式的文件配置也不一样，具体可以参考github：vitepluginimagemin。构建分析
　　分析依赖模块的大小占比，可以让我们更有针对性的进行体积优化。我们通常使用rolluppluginvisualizer插件进行构建分析，方法也比较简单：npminstallrolluppluginvisualizerDvite。config。jsimport｛defineConfig｝fromviteimport｛visualizer｝exportdefaultdefineConfig（｛plugins：〔将visualizer插件放到最后visualizer（）〕｝）
　　npmrunbuild，构建成功之后会在根目录下生成一个stats。html，打开页面即可以看到分析结果。我们还可以通过左上角的排除、包含输入框对依赖模块进行筛选。同时鼠标移入各模块，可以看到详细的分析数据：
　　小结
　　ok，今天的分享就是这些。如果你的项目已经在用Vite，不妨试验一下以上方案，看看项目会不会变得更加丝滑。又到年底了，今年能挺过来的都不容易。最后祝大家都能拿到满意的年终奖