Vite/Rollup中的Chunking策略：优化懒加载模块与共享依赖的打包结构 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vite/Rollup 中的 Chunking 策略：优化懒加载模块与共享依赖的打包结构

大家好！今天我们来深入探讨 Vite 和 Rollup 中至关重要的 Chunking 策略。Chunking 策略直接影响最终打包后的 JavaScript 文件结构，进而影响应用程序的加载性能和用户体验。我们会重点关注如何优化懒加载模块和共享依赖的打包，以实现更高效的资源利用和更快的首屏加载速度。

1. 理解 Chunking 的基本概念

Chunking，顾名思义，就是将应用程序的代码拆分成多个独立的“块”（Chunk）。每个 Chunk 都是一个单独的文件，可以按需加载。这与传统的将所有代码打包到一个大文件的方式截然不同。Chunking 的主要优势在于：

更快的首屏加载速度： 只需加载初始路由所需的 Chunk，避免一次性加载所有代码，从而缩短首屏渲染时间。
更好的缓存利用： 修改某个 Chunk 后，只需要重新下载该 Chunk，其他 Chunk 仍然可以从浏览器缓存中加载。
按需加载： 对于不常用的功能模块，可以通过懒加载的方式，在需要时才加载，减少初始加载体积。

2. Vite/Rollup 的默认 Chunking 策略

Vite 和 Rollup 都提供了开箱即用的 Chunking 功能。默认情况下，它们的策略会遵循一些基本原则：

入口点（Entry Points）： 每个入口点都会生成一个独立的 Chunk。
动态导入（Dynamic Imports）： import() 语句会将导入的模块及其依赖拆分成一个独立的 Chunk，实现懒加载。
公共模块（Common Modules）： 如果多个 Chunk 都依赖同一个模块，该模块会被提取到一个共享的 Chunk 中，避免重复打包。

然而，默认的 Chunking 策略可能并不总是最优的。例如，如果多个懒加载模块都依赖了同一个大型库，那么该库可能会被重复打包到每个懒加载 Chunk 中，导致体积膨胀。

3. 优化懒加载模块的 Chunking

懒加载是提升应用性能的关键技术。但如果不合理地配置 Chunking，反而可能适得其反。以下是一些优化懒加载模块 Chunking 的策略：

确保大型依赖项被正确提取到共享 Chunk： 使用 Vite/Rollup 的配置项来强制将大型依赖项提取到单独的 Chunk 中。

Vite: build.rollupOptions.output.manualChunks
Rollup: output.manualChunks

下面是一个 Vite 的配置示例，将 lodash 提取到名为 vendor 的 Chunk 中：
```
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['lodash'],
        },
      },
    },
  },
});
```
这个配置会创建一个名为 vendor.js 的 Chunk，其中包含 lodash 的代码。所有需要 lodash 的 Chunk 都会引用这个共享 Chunk，而不是重复打包 lodash。
分析 Chunk 依赖关系： 使用 Vite 的 rollupOptions.output.chunkFileNames 或 Rollup 的相应选项来控制 Chunk 的命名规则，使其更易于理解和分析。同时，使用 Rollup 的插件，例如 rollup-plugin-visualizer 或 Vite 的 rollupOptions.plugins 中使用该插件，可视化 Chunk 的依赖关系，找出潜在的优化点。
```
// rollup.config.js 或 vite.config.js
import visualizer from 'rollup-plugin-visualizer';

export default {
  // ...
  plugins: [
    visualizer({
      template: 'treemap', // 可以选择 treemap, sunburst, network 等
      filename: 'stats.html'
    })
  ]
};
```
这个插件会生成一个 stats.html 文件，其中包含 Chunk 的依赖关系图。通过分析该图，可以发现哪些 Chunk 包含重复的依赖项，并进行相应的优化。
调整动态导入的粒度： 不要将整个模块都懒加载，而是只懒加载模块中不常用的部分。这可以减少懒加载 Chunk 的体积，提高加载速度。

例如，如果一个模块包含一个大型的表格组件和一个小的工具函数，可以将表格组件懒加载，而将工具函数直接导入。
```
// Вместо этого:
// import('./large-module').then(module => { ... });

// Сделайте так:
import { smallFunction } from './large-module';
import('./large-module').then(module => {
  const LargeComponent = module.LargeComponent;
  // ...
});
```
使用 prefetch 和 preload 提示浏览器： 对于用户将来很可能访问的懒加载模块，可以使用 <link rel="prefetch"> 或 <link rel="preload"> 标签提示浏览器提前加载。
- prefetch： 告诉浏览器在空闲时下载资源，用于将来可能需要的资源。
- preload： 告诉浏览器立即下载资源，用于当前页面需要的资源。
```
<link rel="prefetch" href="/path/to/lazy-loaded-chunk.js">
<link rel="preload" href="/path/to/critical-chunk.js" as="script">
```
需要注意的是，过度使用 prefetch 和 preload 可能会影响页面的初始加载性能。应该根据实际情况谨慎使用。

4. 优化共享依赖的 Chunking

共享依赖是指多个 Chunk 都依赖的模块。优化共享依赖的 Chunking 可以避免重复打包，减少总体代码体积。

利用 splitChunks 配置项（Rollup）或 manualChunks (Vite): Vite 的 rollupOptions.output.manualChunks 以及 Rollup 的 output.manualChunks 配置项允许开发者自定义 Chunk 的拆分规则。可以根据模块的类型、大小或依赖关系，将它们拆分成不同的 Chunk。

Rollup: output.manualChunks 允许更细粒度的控制，可以基于函数进行动态拆分。
```
// rollup.config.js
export default {
  // ...
  output: {
    manualChunks(id) {
      if (id.includes('node_modules')) {
        // 将所有来自 node_modules 的模块打包到 vendor Chunk 中
        return 'vendor';
      }
      // 其他模块按照默认规则拆分
    },
  },
};
```
这个配置会将所有来自 node_modules 的模块打包到名为 vendor.js 的 Chunk 中。这样可以确保所有第三方库只会被打包一次，避免重复。

Vite: build.rollupOptions.output.manualChunks 功能类似，但配置方式略有不同。
```
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['lodash', 'react', 'react-dom'],
          // 将 lodash, react, react-dom 打包到 vendor Chunk 中
        },
      },
    },
  },
});
```
这个配置会将 lodash、react 和 react-dom 打包到名为 vendor.js 的 Chunk 中。
避免循环依赖： 循环依赖会导致 Chunk 之间形成复杂的依赖关系，影响 Chunking 的效果。应该尽量避免循环依赖，或者使用工具来检测和解决循环依赖。
Code Splitting at the Component Level: 对于大型的单页应用 (SPA)，可以考虑在组件级别进行 Code Splitting。例如，可以将每个路由对应的组件及其依赖项拆分成一个独立的 Chunk。
```
// 路由配置
const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('./components/About.vue'),
  },
];
```
在这个示例中，Home.vue 和 About.vue 组件及其依赖项会被拆分成独立的 Chunk。只有当用户访问 /home 或 /about 路由时，才会加载相应的 Chunk。

5. 高级 Chunking 策略

除了上述基本策略外，还可以采用一些高级 Chunking 策略来进一步优化打包结构：

Vendor Chunking 的精细化控制： 可以根据第三方库的大小、更新频率和重要性，将它们拆分成不同的 Vendor Chunk。例如，可以将常用的 UI 组件库打包到一个 Chunk，而将不常用的工具库打包到另一个 Chunk。
基于路由的 Chunk Grouping： 可以将多个相关的路由及其依赖项打包到一个 Chunk Group 中。这样可以减少路由切换时的加载时间。
使用 HTTP/2 的多路复用： HTTP/2 允许浏览器同时下载多个资源。因此，可以将应用程序拆分成更多的 Chunk，以充分利用 HTTP/2 的多路复用能力。但这需要权衡 Chunk 的数量和大小，避免过多的 HTTP 请求。

6. 代码示例：自定义 Chunking 函数

manualChunks 可以接受一个函数，允许开发者根据模块 ID 动态地决定 Chunk 的拆分规则。这提供了极大的灵活性。

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

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('lodash')) {
            return 'lodash';
          }

          if (id.includes('@my-company/ui-library')) {
              return 'ui-library';
          }

          if (id.includes('node_modules')) {
            // 将所有来自 node_modules 的模块打包到 vendor Chunk 中
            return 'vendor';
          }
        },
      },
    },
  },
});

在这个示例中，我们定义了一个 manualChunks 函数，它根据模块 ID 返回 Chunk 的名称。

如果模块 ID 包含 lodash，则将其打包到名为 lodash.js 的 Chunk 中。
如果模块 ID 包含 @my-company/ui-library，则将其打包到名为 ui-library.js 的 Chunk 中。
如果模块 ID 包含 node_modules，则将其打包到名为 vendor.js 的 Chunk 中。
对于其他模块，使用默认的 Chunking 规则。

7. 常用的 Chunking 配置项对比

配置项	Vite	Rollup	说明
`output.manualChunks`	`build.rollupOptions.output.manualChunks`	`output.manualChunks`	定义自定义的 Chunking 规则。可以接受一个对象或一个函数。
`output.chunkFileNames`	`build.rollupOptions.output.chunkFileNames`	`output.chunkFileNames`	定义 Chunk 文件的命名规则。
`output.entryFileNames`	`build.rollupOptions.output.entryFileNames`	`output.entryFileNames`	定义入口文件的命名规则。
`output.assetFileNames`	`build.rollupOptions.output.assetFileNames`	`output.assetFileNames`	定义静态资源的命名规则。
`plugins`	`plugins`	`plugins`	用于添加 Rollup 插件，例如 `rollup-plugin-visualizer`。
`experimental.renderBuiltUrl`	Vite 特有，用于控制构建后的资源引用方式，可以影响 Chunk 的加载。	Rollup 无此选项。	此选项影响构建后的资源引用，例如图片、CSS 和 JavaScript 文件的 URL。通过配置此选项，可以控制资源加载的方式，例如使用绝对路径或相对路径。这在一些特定的部署场景下非常有用，例如 CDN 集成。

8. 如何选择合适的 Chunking 策略

选择合适的 Chunking 策略需要根据应用程序的具体情况进行权衡。以下是一些考虑因素：

应用程序的规模： 对于小型应用程序，默认的 Chunking 策略可能已经足够。对于大型应用程序，需要更精细的 Chunking 策略来优化性能。
应用程序的架构： 单页应用 (SPA) 和多页应用 (MPA) 需要不同的 Chunking 策略。SPA 通常需要更多的 Code Splitting，而 MPA 可以将每个页面及其依赖项打包到一个独立的 Chunk 中。
应用程序的依赖关系： 复杂的依赖关系需要更精细的 Chunking 策略来避免重复打包和循环依赖。
目标用户的网络环境： 对于网络环境较差的用户，应该尽量减少初始加载体积，并使用 prefetch 和 preload 提示浏览器提前加载资源。

9. 实践案例：优化大型 SPA 的 Chunking

假设我们有一个大型的 SPA，使用了 React、Redux 和 Material-UI。该 SPA 包含多个路由，每个路由对应一个复杂的组件。

为了优化该 SPA 的 Chunking，我们可以采取以下策略：

将 React、Redux 和 Material-UI 打包到单独的 Vendor Chunk 中。
对每个路由对应的组件进行 Code Splitting。
使用 prefetch 提示浏览器提前加载用户将来可能访问的路由对应的 Chunk。
使用 rollup-plugin-visualizer 分析 Chunk 的依赖关系，找出潜在的优化点。

通过这些策略，我们可以显著减少 SPA 的初始加载体积，提高首屏渲染速度，并改善用户体验。

10. 优化打包结构，提升应用性能

Chunking 是优化 Vite 和 Rollup 打包结构的关键技术。通过合理地配置 Chunking 策略，我们可以实现更快的首屏加载速度、更好的缓存利用和更高效的资源利用。掌握 Chunking 的原理和技巧，对于构建高性能的 Web 应用程序至关重要。希望今天的分享能帮助大家更好地理解和应用 Chunking 技术，提升应用程序的性能和用户体验。感谢大家！

更多IT精英技术系列讲座，到智猿学院

Vite/Rollup 中的 Chunking 策略：优化懒加载模块与共享依赖的打包结构

发表回复 取消回复

发表回复取消回复