API design of `advancedChunks` #2118

hyf0 · 2024-09-01T18:58:06Z

hyf0
Sep 1, 2024
Maintainer

Overview

export default defineConfig({
  advancedChunks: {
    minSize: 20000,
    shareCount: 1,
    groups: [
      {
        name: "npm_react",
        test: /node_modules[\\/]+react/,
        priority: 100,
      },
      {
        name: "npm_vendor",
        test: /node_modules/,
        // Only include modules that reference by two entries. Otherwise, just keep it inlined in the entry.
        shareCount: 2,
        priority: 10,
      },
      {
        name: "css_vendor",
        test: /\.css$/,
      },
      {
        name: "all_imported_by_some_file",
        test: "some_file.js",
        // Only for aligning with rollup's manualChunks behavior
        includeDependenciesRecursively: true,
        priority: 1000,
      },
      // The 100% correct way to split your chunks with Webpack https://david-gilbertson.medium.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
      {
        // Function-version behaves like a matrix. Consider it like [name] * [Other options]
        name(moduleId) {
          // Extract `react`  from path `/xxxx/node_modules/react/xxxx`
          const packageName = moduleId.match(
            /[\\/]node_modules[\\/](.*?)([\\/]|$)/
          )[1];
          return `npm_${packageName}`;
        },
        test: /node_modules/,
        // At least bigger than 200KB for per `name`
        minSize: 1024 * 200,
        priority: -10,
      },
    ],
  },
});

Rollup compat

Object form

// rollup
({
  manualChunks: {
    lodash: ["lodash"],
  },
});

=>

// rolldown

({
  advancedChunks: {
    plugins: [{
        transform(code) {
            return 'import "lodash";\n' + code;
        },
    }]
    groups: [
      {
        name: "loda
8000
sh",
        test: /node_modules[\\/]+lodash/,
        includeDependenciesRecursively: true,
      },
    ],
  },
});

Function form

// rollup
({
  manualChunks(id) {
    if (id.includes("node_modules")) {
      return "vendor";
    }
  },
});

=>

// rolldown
({
  advancedChunks: {
    groups: [
      {
        name(moduleId) {
          if (moduleId.includes("node_modules")) {
            return 'vendor'
          }
        },
        // test: , Empty filter means all modules
        includeDependenciesRecursively: true,
      },
    ],
  },
});

hyf0 · 2024-09-01T19:04:31Z

hyf0
Sep 1, 2024
Maintainer Author

Some notices:

A match group could result to multiple chunks by use function-form of id.
A module will first be matched by priority of groups then it's defined-order.
minSize is calculated based on it's original source size not bundled.
strict_execution_order would be enabled forcefully if used advanedChunks.

0 replies

IWANABETHATGUY · 2024-09-02T05:30:15Z

IWANABETHATGUY
Sep 2, 2024
Maintainer

maybe we should use test(or match etc) instead of filter to avoid ambiguity, since for static group filter means any module id matches the filter pattern will included in the target group, but for function-based groupfilter means any module id matches the filter pattern the function will be called.

0 replies

hyf0 · 2024-09-04T15:07:48Z

hyf0
Sep 4, 2024
Maintainer Author

includeDependenciesRecursively is not a option but a require behavior now. #2161

0 replies

ChristopherPHolder · 2025-05-09T18:54:40Z

ChristopherPHolder
May 9, 2025

// rolldown
({
  advancedChunks: {
    groups: [
      {
        name(moduleId) {
          if (moduleId.includes("node_modules")) {
            return 'vendor'
          }
        },
        // test: , Empty filter means all modules
        includeDependenciesRecursively: true,
      },
    ],
  },
});

This does not seem to be the correct interface as name requires a string and not a function. with string as an arg

1 reply

skovhus Jun 23, 2025

Seems like the API changed. @hyf0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

API design of `advancedChunks` #2118

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 4 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

API design of advancedChunks #2118

Uh oh!

Uh oh!

hyf0 Sep 1, 2024 Maintainer

Overview

Rollup compat

Object form

Function form

Replies: 4 comments · 1 reply

Uh oh!

hyf0 Sep 1, 2024 Maintainer Author

Uh oh!

IWANABETHATGUY Sep 2, 2024 Maintainer

Uh oh!

hyf0 Sep 4, 2024 Maintainer Author

Uh oh!

ChristopherPHolder May 9, 2025

Uh oh!

skovhus Jun 23, 2025

API design of `advancedChunks` #2118

hyf0
Sep 1, 2024
Maintainer

Replies: 4 comments 1 reply

hyf0
Sep 1, 2024
Maintainer Author

IWANABETHATGUY
Sep 2, 2024
Maintainer

hyf0
Sep 4, 2024
Maintainer Author

ChristopherPHolder
May 9, 2025