如何将React组件Chat的专属依赖打包至独立chunk？

问题 #

把所有内容打包到单个文件很简单，示例配置如下：

manualChunks: () => {
  return 'everything';
},

但我们有一个src/components/Chat/index.tsx组件，它加载了大量仅该组件使用的依赖。因此希望在React应用中懒加载该组件，并将其所有依赖打包到一个独立chunk中。

尝试了以下配置：

manualChunks: (id: string) => {
  // 部分ID并非文件路径，例如：
  // 'virtual:vite-plugin-ssr:pageFiles:client:client-routing'
  if (!id.includes(__dirname)) {
    return DEFAULT_CHUNK_NAME;
  }

  // Rollup ID开头有一个奇怪的零宽字符，无法用trim()或正则移除
  const pathStartIndex = id.indexOf('/');

  // Rollup ID可能包含查询参数，例如：
  // 'node_modules/react/cjs/react.production.min.js?commonjs-exports'
  const filePath = path.relative(
    __dirname,
    id.slice(pathStartIndex).split('?')[0]
  );

  if (filePath.includes('src/components/Chat/')) {
    return 'chat';
  }

  return DEFAULT_CHUNK_NAME;
},

但最终生成的bundle仅包含src/components/Chat/index.tsx及其所有子组件，并未打包它们使用的任何依赖。请问是否有办法识别src/components/Chat/*的专属依赖并将它们打包在一起？

解决方案 #

现有配置仅匹配了Chat组件自身的文件，未处理它的第三方依赖。要实现将Chat专属依赖打包进同一块，可采用以下两种方案：

1. 自动跟踪专属依赖（推荐） #

利用Rollup提供的getModuleInfoAPI，判断模块是否仅被Chat组件及其子组件引用，且不属于全局公共依赖。修改后的配置如下：

import type { ManualChunksOption } from 'rollup';
import path from 'path';

const DEFAULT_CHUNK_NAME = 'common';

const manualChunks: ManualChunksOption = (id, { getModuleInfo }) => {
  // 跳过虚拟模块和非项目路径模块
  if (!id.includes(__dirname) || id.startsWith('virtual:')) {
    return DEFAULT_CHUNK_NAME;
  }

  // 清理Rollup ID：移除零宽字符和查询参数
  const cleanId = id.replace(/^\u200B/, '').split('?')[0];
  const filePath = path.relative(__dirname, cleanId);

  // 直接匹配Chat组件自身文件
  if (filePath.includes('src/components/Chat/')) {
    return 'chat';
  }

  // 判断当前模块是否仅被Chat相关模块引用
  const moduleInfo = getModuleInfo(id);
  if (moduleInfo) {
    const isOnlyUsedByChat = Array.from(moduleInfo.importers).every(importerId => {
      const importerCleanId = importerId.replace(/^\u200B/, '').split('?')[0];
      const importerFilePath = path.relative(__dirname, importerCleanId);
      return importerFilePath.includes('src/components/Chat/');
    });

    // 排除全局公共依赖，避免重复打包
    const isGlobalDep = id.includes('node_modules/react') || id.includes('node_modules/react-dom');
    if (isOnlyUsedByChat && !isGlobalDep) {
      return 'chat';
    }
  }

  return DEFAULT_CHUNK_NAME;
};

2. 手动指定专属依赖包 #

若明确知道Chat使用的第三方依赖，可直接匹配这些包的路径，强制打包进chat chunk：

import path from 'path';

const DEFAULT_CHUNK_NAME = 'common';

const manualChunks = (id: string) => {
  // 跳过虚拟模块和非项目路径模块
  if (!id.includes(__dirname) || id.startsWith('virtual:')) {
    return DEFAULT_CHUNK_NAME;
  }

  // 清理Rollup ID
  const cleanId = id.replace(/^\u200B/, '').split('?')[0];
  const filePath = path.relative(__dirname, cleanId);

  // 匹配Chat组件自身
  if (filePath.includes('src/components/Chat/')) {
    return 'chat';
  }

  // 手动指定Chat专属依赖包
  const exclusiveChatDeps = ['chat-sdk', 'emoji-picker-react', 'markdown-it'];
  if (exclusiveChatDeps.some(dep => id.includes(`node_modules/${dep}/`))) {
    return 'chat';
  }

  return DEFAULT_CHUNK_NAME;
};

关键说明 #

• 零宽字符可通过replace(/^\u200B/, '')直接移除，无需手动查找索引。
• 必须排除全局公共依赖（如react、react-dom），否则会导致这些依赖被重复打包，破坏全局chunk的复用性。
• 自动跟踪方案适合依赖多或不确定的场景；手动指定方案更简单可控，适合依赖明确的场景。

内容的提问来源于stack exchange，提问作者Gajus