cssChunking

CSS 代码分割 (CSS Chunking) 是一种通过将 CSS 文件拆分并重新排序成代码块来提升网页应用性能的策略。该技术允许你仅加载特定路由所需的 CSS，而不是一次性加载应用的所有 CSS。

你可以通过 next.config.js 文件中的 experimental.cssChunking 选项来控制 CSS 文件的代码分割方式：

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // 默认值
  },
} satisfies NextConfig

export default nextConfig

选项

• true（默认值）：Next.js 会尽可能合并 CSS 文件，根据导入顺序确定文件间的显式和隐式依赖关系，从而减少代码块数量和请求次数。
• false：Next.js 不会尝试合并或重新排序你的 CSS 文件。
• 'strict'：Next.js 会严格按照 CSS 文件在代码中的导入顺序加载，这可能导致生成更多代码块和请求。

如果遇到意外的 CSS 行为，可以考虑使用 'strict' 模式。例如，当你在不同文件中以不同顺序导入 a.css 和 b.css 时（先 a 后 b，或先 b 后 a），true 模式会以任意顺序合并文件并假设它们之间没有依赖关系。但如果 b.css 依赖于 a.css，你可能需要使用 'strict' 模式来阻止文件合并，确保按导入顺序加载——这可能会产生更多代码块和请求。

对于大多数应用，我们推荐使用 true 模式，因为它能减少请求次数并获得更好的性能。