解释 Vite 在生产环境下如何通过 `Rollup` 进行代码分割、Tree Shaking 和打包优化。

各位老铁，大家好！我是你们的老朋友，今天咱们来聊聊 Vite 在生产环境下的那些事儿，特别是它如何借助 Rollup 大杀四方，搞定代码分割、Tree Shaking 和打包优化。放心，咱不搞那些虚头巴脑的，直接上干货，保证你听完能直接上手！

开场白：Vite 和 Rollup，一对好基友

首先，咱们得明确一点，Vite 在开发环境和生产环境扮演的角色是不一样的。开发环境，Vite 主要是用 Esbuild 搞事情，速度那是杠杠的。但是到了生产环境，Vite 就要请出它的好基友——Rollup 了。

为啥呢？因为 Rollup 在代码打包和优化方面，经验更丰富，功能更强大，尤其是在代码分割和 Tree Shaking 上，那可是专业的。你可以把 Rollup 看成一个精雕细琢的工匠，能把你的代码打磨得漂漂亮亮，体积小巧。

第一幕：代码分割，化整为零的艺术

代码分割，顾名思义，就是把你的代码拆分成多个更小的 chunk。 为什么要这么做？原因很简单：

• 提升首屏加载速度: 用户第一次访问你的网站时，只需要下载必要的代码，而不是把整个应用都一股脑儿地塞给用户。
• 更好地缓存: 当你更新应用时，只需要更新发生变化的 chunk，浏览器可以继续使用缓存中的其他 chunk。

Vite 默认使用 Rollup 的动态导入 (dynamic imports) 功能来实现代码分割。 简单来说，就是当你使用 import() 语法导入模块时，Rollup 会自动将这些模块拆分成单独的 chunk。

案例一：简单的动态导入

假设你有一个 components/ 目录，里面有几个组件：

components/
├── Button.js
├── Input.js
└── Select.js

在你的主入口文件 main.js 中，你可以这样使用动态导入：

// main.js
async function loadComponent(componentName) {
  const { default: Component } = await import(`./components/${componentName}.js`);
  const app = document.getElementById('app');
  const componentInstance = new Component();
  app.appendChild(componentInstance.render());
}

document.getElementById('loadButton').addEventListener('click', () => {
  loadComponent('Button');
});

document.getElementById('loadInput').addEventListener('click', () => {
  loadComponent('Input');
});

在这个例子中，当你点击 "loadButton" 按钮时，才会动态加载 Button.js 组件。 Rollup 会自动将 Button.js 打包成一个单独的 chunk。

Vite 配置：决定如何分割

虽然 Vite 默认会进行代码分割，但你也可以通过 vite.config.js 文件进行更细粒度的控制。

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

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'; // 将所有 node_modules 中的模块打包成 vendor.js
          }
        }
      }
    }
  }
});

在这个配置中，manualChunks 函数允许你自定义 chunk 的命名和分组规则。这里我们将所有来自 node_modules 的模块打包成一个名为 vendor.js 的 chunk。 这样做的目的是为了更好地利用浏览器缓存，因为 node_modules 中的模块通常不会频繁更新。

表格：代码分割策略对比

分割策略	优点	缺点	适用场景
默认动态导入	简单易用，自动处理	粒度可能不够细	适用于大多数情况
manualChunks	可以自定义 chunk 的命名和分组规则，更灵活	需要更多的配置工作	适用于需要更精细控制代码分割的场景，例如将第三方库打包成单独的 chunk
按路由分割	每个路由对应一个 chunk，用户访问哪个路由就加载哪个 chunk	路由切换时可能需要加载新的 chunk	适用于单页应用 (SPA)，可以提高首屏加载速度

第二幕：Tree Shaking，摇掉无用的代码

Tree Shaking，顾名思义，就是“摇树”。 把你代码中没用的部分像树叶一样摇掉，从而减小打包后的体积。 Rollup 在 Tree Shaking 方面非常出色，它能静态分析你的代码，找出没有被使用的部分，然后把它们从最终的 bundle 中移除。

案例二：Tree Shaking 的威力

假设你使用了一个名为 lodash 的库，但是只用到了其中的 cloneDeep 函数。

// utils.js
import { cloneDeep, map } from 'lodash';

export function deepClone(obj) {
  return cloneDeep(obj);
}

如果你不使用 Tree Shaking，那么整个 lodash 库都会被打包到你的代码中，即使你只用到了 cloneDeep 函数。 但是，如果启用了 Tree Shaking，Rollup 会自动识别出 map 函数没有被使用，然后把它从最终的 bundle 中移除，从而减小打包后的体积。

Vite 配置：确保 Tree Shaking 生效

为了确保 Tree Shaking 生效，你需要注意以下几点：

1. 使用 ES 模块: Tree Shaking 只能作用于 ES 模块 (使用 import 和 export 语法)。 CommonJS 模块 (使用 require 和 module.exports 语法) 无法进行 Tree Shaking。
2. 避免副作用: 副作用是指在模块导入时执行的代码，例如修改全局变量。 如果你的模块有副作用，Rollup 可能会认为这个模块是必须的，从而阻止 Tree Shaking。

代码示例：避免副作用

错误的写法（有副作用）：

// global.js
window.globalVariable = 'Hello'; // 修改了全局变量，产生副作用
export const message = 'World';

正确的写法（没有副作用）：

// global.js
export const message = 'World';

第三幕：打包优化，精益求精

除了代码分割和 Tree Shaking 之外，Vite 还提供了许多其他的打包优化选项，帮助你进一步减小 bundle 的体积，提升性能。

1. 代码压缩 (Minification)

代码压缩是指移除代码中的空格、注释、换行符等不必要的字符，从而减小文件大小。 Vite 默认使用 Esbuild 进行代码压缩，速度非常快。

2. 代码混淆 (Obfuscation)

代码混淆是指将代码转换为难以理解的形式，从而增加代码的安全性。 Vite 默认不启用代码混淆，但你可以通过插件来实现。

3. 图片优化

Vite 可以自动优化图片，例如压缩图片大小、转换为更高效的格式 (如 WebP)。 你可以使用插件来实现图片优化。

Vite 配置：开启代码压缩

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

export default defineConfig({
  build: {
    minify: 'terser', // 使用 Terser 进行代码压缩
  },
});

表格：打包优化策略对比

优化策略	优点	缺点	适用场景
代码压缩	减小文件大小，提升加载速度	代码可读性降低	所有场景
代码混淆	增加代码安全性，防止代码被轻易破解	代码可读性大幅降低，调试困难	对代码安全性有较高要求的场景
图片优化	减小图片大小，提升加载速度	可能损失一些图片质量	所有包含图片的场景

案例三：使用插件进行图片优化

你可以使用 vite-plugin-imagemin 插件来进行图片优化。

1. 安装插件：

npm install vite-plugin-imagemin -D

2. 配置插件：

// vite.config.js
import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  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: true
          }
        ]
      }
    })
  ]
});

总结：Vite + Rollup，打造高性能应用

总而言之，Vite 在生产环境下借助 Rollup 的强大功能，通过代码分割、Tree Shaking 和打包优化等手段，能够有效地减小 bundle 的体积，提升应用的性能。 记住，代码分割是化整为零的艺术，Tree Shaking 是摇掉无用代码的利器，打包优化是精益求精的追求。

希望今天的分享对你有所帮助！ 记住，实践是检验真理的唯一标准，赶紧动手试试吧！ 如果你有任何问题，欢迎随时提问。 下次再见！