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

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

各位同学，大家好！今天我们来深入探讨 Vite 和 Rollup 中一个至关重要的概念：Chunking 策略。Chunking，中文可以理解为“分块”，指的是在打包过程中，将应用程序的代码分割成多个独立的、可按需加载的文件块（chunks）。一个精心设计的 Chunking 策略，能显著提升应用的加载速度，优化用户体验。

1. Chunking 的必要性：解决单一大包的困境

在 Web 应用开发的早期，我们通常会将所有代码打包成一个巨大的 JavaScript 文件。虽然这种方式简单粗暴，但随着应用规模的增长，问题也随之而来：

• 加载时间过长： 用户必须下载并解析整个应用的代码，即使他们只访问了其中的一部分功能。
• 缓存效率低下： 任何代码的修改都会导致整个大包失效，浏览器需要重新下载。

Chunking 的出现正是为了解决这些问题。通过将应用拆分成多个小的、独立的块，我们可以实现以下目标：

• 按需加载 (Lazy Loading)： 只加载用户当前需要的功能模块，避免不必要的资源浪费。
• 代码复用 (Code Sharing)： 提取公共依赖，减少冗余代码，提升缓存效率。
• 并行加载： 浏览器可以同时下载多个块，缩短整体加载时间。

2. Vite/Rollup 中的默认 Chunking 策略

Vite 和 Rollup 都内置了默认的 Chunking 策略，旨在提供开箱即用的优化。它们的默认策略通常基于以下原则：

• 入口点 (Entry Points)： 每个入口点都会生成一个独立的 chunk。例如，如果你有两个页面 pageA.js 和 pageB.js 作为入口点，那么默认情况下会生成两个对应的 chunk。
• 动态导入 (Dynamic Imports)： 使用 import() 语法进行动态导入的模块会被打包成独立的 chunk。这是实现懒加载的关键。
• 公共依赖 (Common Dependencies)： 如果多个 chunk 依赖于同一个模块，该模块会被提取到一个单独的共享 chunk 中。

让我们看一个简单的例子。假设我们有以下目录结构：

src/
├── main.js
├── pageA.js
├── pageB.js
└── components/
    └── Button.js

main.js:

import('./pageA').then(module => {
  module.init();
});

import('./pageB').then(module => {
  module.init();
});

pageA.js:

import Button from './components/Button';

export function init() {
  console.log('Page A initialized');
  Button.render('Page A Button');
}

pageB.js:

import Button from './components/Button';

export function init() {
  console.log('Page B initialized');
  Button.render('Page B Button');
}

components/Button.js:

export default {
  render(text) {
    const button = document.createElement('button');
    button.textContent = text;
    document.body.appendChild(button);
  }
};

在这个例子中，main.js 使用动态导入加载 pageA.js 和 pageB.js，而 pageA.js 和 pageB.js 都依赖于 Button.js。

使用 Vite 或 Rollup 打包后，我们可能会得到类似以下的 chunk 结构：

• main.js (包含入口点逻辑)
• pageA.js (包含 pageA.js 的代码)
• pageB.js (包含 pageB.js 的代码)
• Button.js (包含 Button.js 的代码，被 pageA.js 和 pageB.js 共享)

默认的 Chunking 策略通常已经能满足大部分应用的需求，但对于更复杂的应用，我们需要更精细的控制。

3. 自定义 Chunking 策略：优化打包结构

Vite 和 Rollup 提供了灵活的配置选项，允许我们自定义 Chunking 策略，以更好地满足特定应用的需求。

3.1 Rollup 中的 manualChunks 配置

Rollup 提供了 manualChunks 配置项，允许我们手动指定哪些模块应该被打包到哪个 chunk 中。manualChunks 是一个函数，接收模块的 ID (通常是文件路径) 作为参数，返回 chunk 的名称。如果返回 null 或 undefined，则 Rollup 会使用默认的 Chunking 策略。

例如，我们可以将所有组件打包到一个名为 components 的 chunk 中：

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
    manualChunks(id) {
      if (id.includes('src/components')) {
        return 'components';
      }
    }
  }
};

在这个例子中，任何路径包含 src/components 的模块都会被打包到 components.js chunk 中。

3.2 Vite 中的 build.rollupOptions.output.manualChunks 配置

Vite 基于 Rollup 构建，因此也支持 manualChunks 配置。我们需要在 vite.config.js 中通过 build.rollupOptions.output.manualChunks 来配置它。

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

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

3.3 函数形式的 manualChunks

manualChunks 还可以是一个函数，该函数接受两个参数：

• id: 模块的 ID (文件路径)

• { getModuleInfo, getModuleIds }: 一个包含两个函数的对象，用于获取模块的更多信息。

  • getModuleInfo(moduleId): 返回一个包含模块信息的对象，例如 importedIds (模块导入的模块 ID 列表) 和 isEntry (是否为入口点)。
  • getModuleIds(): 返回所有模块 ID 的数组。

这种形式的 manualChunks 提供了更大的灵活性，允许我们基于模块的依赖关系和属性来决定如何进行 Chunking。

例如，我们可以创建一个 chunk，包含所有被多个入口点共享的模块：

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

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id, { getModuleInfo, getModuleIds }) {
          const moduleInfo = getModuleInfo(id);

          if (!moduleInfo) {
            return;
          }

          const importers = getModuleIds().filter(moduleId => {
            const importerInfo = getModuleInfo(moduleId);
            return importerInfo && importerInfo.importedIds.includes(id);
          });

          if (importers.length > 1 && !moduleInfo.isEntry) {
            return 'shared';
          }
        }
      }
    }
  }
});

在这个例子中，我们首先获取模块的信息。然后，我们找到所有导入该模块的模块。如果该模块被多个模块导入，并且不是入口点，那么我们将其打包到 shared.js chunk 中。

3.4 对象形式的 manualChunks

manualChunks 还可以是一个对象，其中键是 chunk 的名称，值是一个包含模块 ID 的数组或一个用于判断模块是否应该包含在该 chunk 中的函数。

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

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          components: id => id.includes('src/components')
        }
      }
    }
  }
});

在这个例子中，我们将 react 和 react-dom 打包到 vendor.js chunk 中，并将所有路径包含 src/components 的模块打包到 components.js chunk 中。

4. Chunking 策略的最佳实践

选择合适的 Chunking 策略需要根据具体的应用场景进行权衡。以下是一些常见的最佳实践：

• 提取第三方库： 将第三方库 (如 React, Vue 等) 打包到一个单独的 vendor chunk 中。这样可以利用浏览器的缓存机制，减少重复下载。
• 按路由拆分： 对于大型单页应用，可以根据路由将应用拆分成多个 chunk。只有当用户访问特定路由时，才会加载相应的 chunk。
• 提取公共组件： 将多个页面或模块共享的组件提取到一个单独的 chunk 中，减少冗余代码。
• 避免过度拆分： 过多的 chunk 可能会导致请求数量增加，反而降低加载速度。需要权衡 chunk 的大小和数量。

5. 常见 Chunking 策略的对比

为了更好地理解各种 Chunking 策略的优缺点，我们可以进行一个简单的对比：

策略	优点	缺点	适用场景
默认 Chunking 策略	简单易用，开箱即用	可能无法满足复杂应用的需求，例如无法有效提取公共依赖	小型到中型应用，或者对 Chunking 没有特殊要求的应用
手动指定 Chunk (manualChunks)	灵活可控，可以根据具体需求进行优化	需要手动配置，增加了配置的复杂性	大型应用，需要精细控制 Chunking 策略的应用，例如需要根据路由或模块的依赖关系进行拆分
提取第三方库	利用浏览器缓存，减少重复下载	需要手动维护第三方库的列表	所有使用第三方库的应用
按路由拆分	只有当用户访问特定路由时才会加载相应的 chunk，提高初始加载速度	需要根据路由结构进行配置	大型单页应用，具有多个路由和模块
提取公共组件	减少冗余代码，提高缓存效率	需要识别和提取公共组件	多个页面或模块共享组件的应用

6. 代码示例：基于路由的 Chunking

假设我们有一个包含两个路由 /home 和 /about 的单页应用。我们可以使用以下代码实现基于路由的 Chunking：

// src/App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在这个例子中，我们使用 React.lazy 和 Suspense 实现懒加载。Home 和 About 组件只有当用户访问相应的路由时才会被加载。

为了进一步优化 Chunking，我们可以使用 manualChunks 将第三方库提取到一个单独的 vendor chunk 中：

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

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-router-dom', 'react-dom'],
        }
      }
    }
  }
});

7. 总结：Chunking 策略是提升应用性能的关键

Chunking 策略是优化 Web 应用性能的关键技术之一。通过合理的 Chunking 策略，我们可以实现按需加载、代码复用和并行加载，从而提升应用的加载速度和用户体验。Vite 和 Rollup 提供了灵活的配置选项，允许我们自定义 Chunking 策略，以更好地满足特定应用的需求。 选择合适的 Chunking 策略需要根据具体的应用场景进行权衡，并不断进行测试和优化。

8. 持续学习与实践

掌握 Chunking 策略并非一蹴而就，需要不断地学习和实践。建议大家多阅读 Vite 和 Rollup 的官方文档，尝试不同的 Chunking 策略，并结合实际项目进行优化。 深入理解 Chunking 的原理，才能更好地应对各种复杂的应用场景，构建高性能的 Web 应用。

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