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

很多兄弟都在使用 Vite 了，但如果你是前端 leader 或者是团队核心的话，不得不可考虑的一个问题就是性能优化。Vite 在开发环境性能已经非常不错了，今天我们主要聊聊生产环境的优化，其实方式和 Webpack 大同小异，只不过 Vite 构建时使用的是 Rollup 而已。

学习 Vite 最好是抛开脚手架工具，单独使用它。具体方式可以查看 Vite 入门篇 ，这里我就不再赘述了。那么还等什么，开整！

分包策略

默认情况下，浏览器重复请求相同名称的静态资源时，会直接使用缓存的资源。利用这个机制我们可以将不会经常更新的代码单独打包成一个 JS 文件，这样就可以减少 HTTP 请求，同时降低服务器压力。以 lodash 为例：

npm i lodash

安装 lodash ，然后在 main.js 中写入以下代码：

// src/main.js
import {
    cloneDeep } from 'lodash'

const obj = cloneDeep({
   })

打包结果：

项目代码和依赖模块打包成了一个 JS 文件。接着我们来配置分包，修改底层的 Rollup 配置：

// vite.config.js
import {
    defineConfig } from 'vite'

export default defineConfig({
   
  build: {
   
    rollupOptions: {
   
      output: {
   
        manualChunks: id => {
   
          // 将 node_modules 中的代码单独打包成一个 JS 文件
          if(id.includes('node_modules')) {
   
            return 'vendor'
          }
        }
      }
    }
  }
})

打包结果如下：

可以看到依赖模块已经单独生成一个 JS 文件了。这样我们即使修改了 main.js 中的代码