Skip to content

高级 Chunk 选项

¥Advanced Chunks Options

  • 类型:object

    ¥Type: object

  • 可选:是 ✅

    ¥Optional: Yes ✅

允许手动进行细粒度控制的分块,类似于 webpack 的 optimization.splitChunks

¥Allows manual chunking with fine-grained control, similar to webpack's optimization.splitChunks.

示例

¥Examples

基本供应商 Chunk

¥Basic vendor chunk

js
export default {
  output: {
    advancedChunks: {
      minSize: 20000,
      groups: [
        {
          name: 'vendor',
          test: /node_modules/,
          priority: 10,
        },
      ],
    },
  },
};

具有优先级的多个块组

¥Multiple chunk groups with priorities

js
export default {
  output: {
    advancedChunks: {
      groups: [
        {
          name: 'react-vendor',
          test: /node_modules[\\/]react/,
          priority: 20,
        },
        {
          name: 'ui-vendor',
          test: /node_modules[\\/](antd|@mui)/,
          priority: 15,
        },
        {
          name: 'vendor',
          test: /node_modules/,
          priority: 10,
        },
        {
          name: 'common',
          minShareCount: 2,
          minSize: 10000,
          priority: 5,
        },
      ],
    },
  },
};

基于大小拆分

¥Size-based splitting

js
export default {
  output: {
    advancedChunks: {
      groups: [
        {
          name: 'large-libs',
          test: /node_modules/,
          minSize: 100000, // 100KB
          maxSize: 250000, // 250KB
          priority: 10,
        },
      ],
    },
  },
};

includeDependenciesRecursively

  • 类型:boolean

    ¥Type: boolean

  • 默认值:true

    ¥Default: true

  • 路径:output.advancedChunks.includeDependenciesRecursively

    ¥Path: output.advancedChunks.includeDependenciesRecursively

默认情况下,每个组还会包含已捕获模块的依赖。这减少了生成循环代码块的可能性。

¥By default, each group will also include captured modules' dependencies. This reduces the chance of generating circular chunks.

深入探讨

¥In-depth

如果你想禁用此行为,建议同时设置:

¥If you want to disable this behavior, it's recommended to both set:

  • preserveEntrySignatures: false | 'allow-extension'

  • strictExecutionOrder: true

为了避免生成无效的块。

¥to avoid generating invalid chunks.

minSize

  • 类型:number

    ¥Type: number

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.minSize

    ¥Path: output.advancedChunks.minSize

如果组中未指定,则全局回退到组 minSize

¥Global fallback for group minSize if not specified in the group.

maxSize

  • 类型:number

    ¥Type: number

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.maxSize

    ¥Path: output.advancedChunks.maxSize

如果组中未指定,则全局回退到组 maxSize

¥Global fallback for group maxSize if not specified in the group.

maxModuleSize

  • 类型:number

    ¥Type: number

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.maxModuleSize

    ¥Path: output.advancedChunks.maxModuleSize

如果组中未指定,则全局回退到组 maxModuleSize

¥Global fallback for group maxModuleSize if not specified in the group.

minModuleSize

  • 类型:number

    ¥Type: number

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.minModuleSize

    ¥Path: output.advancedChunks.minModuleSize

如果组中未指定,则全局回退到组 minModuleSize

¥Global fallback for group minModuleSize if not specified in the group.

minShareCount

  • 类型:number

    ¥Type: number

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.minShareCount

    ¥Path: output.advancedChunks.minShareCount

如果组中未指定,则全局回退到组 minShareCount

¥Global fallback for group minShareCount if not specified in the group.

groups

  • 类型:Array<GroupConfig>

    ¥Type: Array<GroupConfig>

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.groups

    ¥Path: output.advancedChunks.groups

用于高级分块的组。

¥Groups to be used for advanced chunking.

name

  • 类型:string | ((moduleId: string, ctx: ChunkingContext) => string | NullValue)

    ¥Type: string | ((moduleId: string, ctx: ChunkingContext) => string | NullValue)

  • 路径:output.advancedChunks.groups[].name

    ¥Path: output.advancedChunks.groups[].name

组名称。用作块名称,并在 chunkFileNames 中替换 [name] 占位符。

¥Name of the group. Used as the chunk name and replaces the [name] placeholder in chunkFileNames.

示例

¥Examples

静态名称:

¥Static name:

js
{
  name: 'libs',
  test: /node_modules/
}

动态名称:

¥Dynamic name:

js
{
  name: (moduleId) => {
    if (moduleId.includes('node_modules')) {
      return 'libs';
    }
    return 'app';
  },
  minSize: 100 * 1024
}

警告

minSizemaxSize 等约束分别应用于函数返回的不同名称。

¥Constraints like minSize, maxSize, etc. are applied separately for different names returned by the function.

test

  • 类型:string | RegExp | ((id: string) => boolean | undefined | void)

    ¥Type: string | RegExp | ((id: string) => boolean | undefined | void)

  • 可选:是 ✅

    ¥Optional: Yes ✅

  • 路径:output.advancedChunks.groups[].test

    ¥Path: output.advancedChunks.groups[].test

控制哪些模块被捕获到此组中。

¥Controls which modules are captured in this group.

深入探讨

¥In-depth

可用的选项:

¥The available options:

  • 字符串:包含此字符串的模块 ID 将被捕获

    ¥String: Module IDs containing this string will be captured

  • 正则表达式:匹配此模式的模块 ID 将被捕获

    ¥RegExp: Module IDs matching this pattern will be captured

  • 功能:test(id) 返回 true 的模块将被捕获

    ¥Function: Modules for which test(id) returns true will be captured

  • 空:所有模块均视为匹配

    ¥Empty: All modules are considered matched

警告

使用正则表达式时,请使用 [\\/] 而不是 / 来匹配路径分隔符,以避免在 Windows 上出现问题。

¥When using regular expressions, use [\\/] to match path separators instead of / to avoid issues on Windows.

✅ 推荐:/node_modules[\\/]react/

¥✅ Recommended: /node_modules[\\/]react/

❌ 不推荐:/node_modules/react/

¥❌ Not recommended: /node_modules/react/

priority

  • 类型:number

    ¥Type: number

  • 默认值:0

    ¥Default: 0

  • 路径:output.advancedChunks.groups[].priority

    ¥Path: output.advancedChunks.groups[].priority

组的优先级。优先选择优先级较高的组。

¥Priority of the group. Groups with higher priority are chosen first.

示例

¥Examples

js
{
  advancedChunks: {
    groups: [
      {
        name: 'react',
        test: /node_modules[\\/]react/,
        priority: 1,
      },
      {
        name: 'other-libs',
        test: /node_modules/,
        priority: 2,
      },
    ];
  }
}

minSize

  • 类型:number

    ¥Type: number

  • 默认值:0

    ¥Default: 0

  • 路径:output.advancedChunks.groups[].minSize

    ¥Path: output.advancedChunks.groups[].minSize

所需块的最小大小(以字节为单位)。如果累计大小小于此值,则该组将被忽略。

¥Minimum size in bytes of the desired chunk. If the accumulated size is smaller, the group is ignored.

minShareCount

  • 类型:number

    ¥Type: number

  • 默认值:1

    ¥Default: 1

  • 路径:output.advancedChunks.groups[].minShareCount

    ¥Path: output.advancedChunks.groups[].minShareCount

控制是否根据引用该模块的入口代码块数量来捕获该模块。

¥Controls if a module should be captured based on how many entry chunks reference it.

maxSize

  • 类型:number

    ¥Type: number

  • 默认值:Infinity

    ¥Default: Infinity

  • 路径:output.advancedChunks.groups[].maxSize

    ¥Path: output.advancedChunks.groups[].maxSize

如果累计大小超过此值,则该组将被拆分为多个组。

¥If the accumulated size exceeds this value, the group will be split into multiple groups.

maxModuleSize

  • 类型:number

    ¥Type: number

  • 默认值:Infinity

    ¥Default: Infinity

  • 路径:output.advancedChunks.groups[].maxModuleSize

    ¥Path: output.advancedChunks.groups[].maxModuleSize

只有当模块大小小于或等于此值时,才能捕获模块。

¥A module can only be captured if its size is smaller or equal to this value.

minModuleSize

  • 类型:number

    ¥Type: number

  • 默认值:0

    ¥Default: 0

  • 路径:output.advancedChunks.groups[].minModuleSize

    ¥Path: output.advancedChunks.groups[].minModuleSize

只有当模块大小大于或等于此值时,才能捕获模块。

¥A module can only be captured if its size is larger or equal to this value.

另请参阅

¥See Also