#CssChunkingPlugin

CssChunkingPlugin 是一个专为 CSS 模块代码分割设计的实验性插件（参考自 Next.js），确保样式的执行顺序与源代码导入顺序保持一致，避免样式错误。

new rspack.experiments.CssChunkingPlugin(options);

#选项

#strict

• 类型： boolean
• 默认值： false

是否严格保持 CSS 模块的导入顺序。

#模式对比

#常规模式 (strict: false，默认)

new rspack.experiments.CssChunkingPlugin({
  strict: false,
});

• 如果 CSS 模块在项目中被以不同顺序导入，则默认它们之间没有依赖关系
• 允许合并无依赖关系的 CSS 模块，以减少 chunk 数量

#严格模式 (strict: true)

new rspack.experiments.CssChunkingPlugin({
  strict: true,
});

• 严格保证 CSS 模块的执行顺序与源代码导入顺序一致

#示例

a.css 和 b.css 分别在 foo.js 和 bar.js 中被导入，但导入顺序不同：

// foo.js
import './a.css';
import './b.css';

// bar.js
import './b.css';
import './a.css';

常规模式 (strict: false)：认为 a.css 和 b.css 之间无依赖关系，会将它们合并到同一个 chunk 中。

严格模式 (strict: true)：严格按照导入顺序，将 a.css 和 b.css 分别打包到不同的 chunk 中，确保执行顺序一致。

#与 SplitChunksPlugin 的区别

SplitChunksPlugin 在进行代码分割时不会考虑模块的导入顺序。对于 JavaScript 模块，这不是问题，因为模块的执行顺序在运行时通过函数调用决定。

但对于 CSS 模块，CSS 的执行顺序完全由其在产物文件中的排列顺序决定，无法在运行时控制。如果执行顺序变化，可能导致样式错误。

例如，导入如下 CSS 模块：

import './a.css';
import './b.css';
import './c.css';

SplitChunksPlugin 可能拆分成以下 chunk 以满足 maxSize 等配置约束：

chunk-1: b.css
chunk-2: a.css, c.css // 可能因尺寸较大而被提取

这样，最终执行顺序变为 b.css → a.css → c.css，违背了原始导入顺序，可能导致样式错误。

CssChunkingPlugin 的内部算法会先分离出所有 CSS 模块，然后根据源代码的导入顺序判断哪些可以合并，无法合并则拆分为独立的 chunk，以保证样式的正确性。