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

各位观众老爷们，大家好！今天咱们来聊聊 Vite 在生产环境下，如何借助 Rollup 这位老伙计，玩转代码分割、Tree Shaking 和打包优化。保证让你的项目起飞，速度嗖嗖的！

1. Rollup：Vite 背后的男人

首先，咱们得明白，Vite 的开发环境那叫一个快，因为它压根没打包，直接用的浏览器原生 ES 模块。但是，生产环境可不能这么玩，浏览器对模块的请求数量是有限制的，而且未经优化的代码体积也很大。这时候，Rollup 就闪亮登场了。

Rollup 是一个 JavaScript 模块打包器，它擅长生成高度优化的代码。Vite 在生产环境下，实际上就是用 Rollup 来完成最终的打包任务。你可以把 Vite 看作是 Rollup 的一个强化版，它在开发阶段避开了打包这个耗时的步骤，但在生产阶段，还是得靠 Rollup 来把代码压缩成浏览器可以高效运行的格式。

2. 代码分割 (Code Splitting)：化整为零，按需加载

想象一下，你的网站就像一艘巨轮，所有的代码都挤在一个大文件里。用户第一次访问，就得把整个巨轮都下载下来，这得多慢啊！代码分割，就是把这艘巨轮拆分成若干个小船，用户只需要下载当前需要的小船，其他的可以等需要的时候再加载。

Rollup 通过动态 import() 语法来实现代码分割。Vite 会自动检测到你的代码中的动态 import()，并将其作为代码分割的依据。

例子：

假设我们有一个组件 MyComponent.vue：

<template>
  <div>
    <h1>My Component</h1>
    <button @click="loadHelper">Load Helper</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const helper = ref(null);

const loadHelper = async () => {
  // 动态导入 helper 模块
  const { default: Helper } = await import('./helper.js');
  helper.value = new Helper();
  alert(helper.value.message);
};
</script>

helper.js 文件：

export default class Helper {
  constructor() {
    this.message = "Hello from Helper!";
  }
}

在这个例子中，helper.js 模块是通过动态 import() 加载的。Vite 在打包时，会将 helper.js 单独打包成一个 chunk，只有当用户点击按钮时才会加载。

打包结果：

在 dist 目录下，你会看到类似这样的文件：

• index.js (主入口)
• assets/helper-[hash].js (动态导入的 helper 模块)

好处：

• 首次加载速度快： 用户只需要下载必要的代码，减少了初始加载时间。
• 资源利用率高： 只有在需要的时候才加载代码，避免了浪费。
• 缓存更有效： 如果只有 helper.js 发生了变化，浏览器只需要重新下载这个 chunk，而不需要重新下载整个应用。

3. Tree Shaking：摇掉无用的代码，只留下精华

Tree Shaking，顾名思义，就是摇掉那些没用的代码，只留下精华。Rollup 通过静态分析你的代码，找到那些没有被使用的变量、函数、类等等，然后把它们从最终的打包结果中剔除掉。

例子：

假设我们有一个模块 utils.js：

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

// 这个函数永远不会被使用
export function neverUsed() {
  console.log("This function is never used.");
}

然后在 main.js 中只使用了 add 函数：

import { add } from './utils.js';

console.log(add(2, 3));

在经过 Rollup 的 Tree Shaking 后，subtract、multiply 和 neverUsed 函数会被从最终的打包结果中移除。

原理：

Rollup 通过分析 ES 模块的静态结构，确定哪些导出的变量、函数、类等没有被其他模块引用。如果没有被引用，就认为它是 dead code，可以安全地移除。

注意事项：

• Tree Shaking 依赖于 ES 模块的静态结构。CommonJS 模块（require()）是动态的，Rollup 无法进行有效的 Tree Shaking。
• 某些代码可能会被误判为 dead code。例如，通过字符串拼接动态访问的属性或方法，Rollup 可能无法识别。
• 为了更好地进行 Tree Shaking，建议使用纯函数和不可变数据。

4. 打包优化：让代码更小，更快，更强

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

4.1 代码压缩 (Minification):

代码压缩是指移除代码中的空格、注释、换行符等不必要的字符，同时还可以对变量名进行缩短，从而减小代码体积。

Vite 默认使用 esbuild 进行代码压缩，速度非常快。你也可以选择使用 terser，它提供更精细的压缩选项，但速度相对较慢。

配置 terser:

首先，安装 rollup-plugin-terser 插件：

npm install -D rollup-plugin-terser

然后在 vite.config.js 中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { terser } from 'rollup-plugin-terser'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [terser()],
    },
    minify: false // 关闭 esbuild 的压缩，使用 terser
  }
})

4.2 代码混淆 (Obfuscation):

代码混淆是指将代码转换成难以理解的形式，增加代码被逆向工程的难度。这可以保护你的代码不被轻易地盗用。

terser 也提供了代码混淆的功能。

配置 terser 进行混淆：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { terser } from 'rollup-plugin-terser'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [
        terser({
          mangle: true, // 启用变量名混淆
          compress: {
            drop_console: true, // 删除 console.log 语句
          },
        }),
      ],
    },
    minify: false // 关闭 esbuild 的压缩，使用 terser
  }
})

4.3 模块预加载 (Preload/Prefetch):

模块预加载是指在浏览器空闲时，提前加载一些将来可能会用到的模块。这可以减少用户在使用这些模块时的等待时间。

Vite 会自动生成 preload 指令，告诉浏览器哪些模块需要提前加载。

例子：

在 HTML 文件中，你会看到类似这样的 link 标签：

<link rel="modulepreload" href="/assets/vendor-[hash].js">
<link rel="modulepreload" href="/assets/index-[hash].js">

preload 指令告诉浏览器优先加载这些模块。

prefetch 指令则告诉浏览器在空闲时加载这些模块，优先级较低。

4.4 代码拆分策略 (Chunking Strategy):

Vite 默认的代码拆分策略已经足够好，但你也可以自定义代码拆分策略，以更好地满足你的需求。

例如，你可以将一些常用的第三方库打包成一个单独的 chunk，这样可以利用浏览器的缓存，减少重复下载。

配置 rollupOptions.output.manualChunks:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'axios'], // 将这些库打包成 vendor.js
        },
      },
    },
  }
})

在这个例子中，vue、vue-router 和 axios 会被打包成一个名为 vendor.js 的 chunk。

4.5 异步 Chunk 命名:

为了方便调试和分析，你可以自定义异步 chunk 的命名规则。

配置 rollupOptions.output.chunkFileNames:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 自定义 chunk 文件名
      },
    },
  }
})

在这个例子中，异步 chunk 的文件名会变成 js/[name]-[hash].js 的格式。

5. Vite 配置：build 对象详解

Vite 的 vite.config.js 文件中的 build 对象，是控制 Rollup 打包行为的关键。下面是一些常用的配置选项：

选项	类型	默认值	描述
outDir	string	'dist'	指定输出目录。
assetsDir	string	'assets'	指定静态资源目录。
assetsInlineLimit	number	4096	小于此阈值的静态资源将内联为 base64 URL。
cssCodeSplit	boolean	true	是否拆分 CSS 代码。
sourcemap	boolean | 'inline' | 'hidden'	false	是否生成 sourcemap 文件。
minify	boolean | 'terser' | 'esbuild'	'esbuild'	使用哪个工具进行代码压缩。
rollupOptions	RollupOptions	{}	直接配置 Rollup 的选项。
chunkSizeWarningLimit	number	500	当 chunk 大小超过此阈值时，发出警告 (单位 KB)。
emptyOutDir	boolean	true	构建时清空输出目录。
reportCompressedSize	boolean	true	是否报告压缩后的大小。

6. 实战演练：优化 Vue 项目

假设我们有一个简单的 Vue 项目，包含以下文件：

• src/main.js (入口文件)
• src/App.vue (根组件)
• src/components/MyComponent.vue (一个组件)
• src/utils/helper.js (一个工具模块)

我们可以通过以下步骤来优化这个项目：

1. 使用动态 import() 进行代码分割： 将一些不常用的组件或模块使用动态 import() 加载。
2. 检查代码，确保使用 ES 模块： 避免使用 CommonJS 模块，以便 Rollup 可以进行有效的 Tree Shaking。
3. 配置 terser 进行代码压缩和混淆： 减小代码体积，增加代码的安全性。
4. 配置 rollupOptions.output.manualChunks： 将第三方库打包成一个单独的 chunk。
5. 分析打包结果： 使用 Rollup 的可视化工具 (例如 rollup-plugin-visualizer) 分析打包结果，找出可以进一步优化的地方。

7. 总结

Vite 结合 Rollup，为我们提供了一套强大的前端打包解决方案。通过代码分割、Tree Shaking 和各种打包优化选项，我们可以轻松地构建出高性能、高效率的 Web 应用。

记住，优化是一个持续的过程，需要不断地学习和实践。希望今天的分享对大家有所帮助！下次再见！