CSS 分块是一种通过将 CSS 文件拆分并重新排序成块来提升 Web 应用程序性能的策略。这使您能够只加载特定路由所需的 CSS，而不是一次性加载所有应用程序的 CSS。

您可以通过在 next.config.js 文件中使用 experimental.cssChunking 选项来控制 CSS 文件的分块方式：

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // default
  },
} satisfies NextConfig

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: true, // default
  },
}

module.exports = nextConfig

选项

• true (默认值): Next.js 将尽可能尝试合并 CSS 文件，根据导入顺序确定文件之间显式和隐式的依赖关系，以减少块的数量，从而减少请求的数量。
• false: Next.js 将不会尝试合并或重新排序您的 CSS 文件。
• 'strict': Next.js 将按照 CSS 文件在您的文件中被导入的正确顺序加载它们，这可能会导致更多的块和请求。

如果您遇到意料之外的 CSS 行为，可以考虑使用 'strict'。例如，如果您在不同文件中以不同的 import 顺序（a 在 b 之前，或 b 在 a 之前）导入 a.css 和 b.css，true 会以任意顺序合并这些文件，并假设它们之间没有依赖关系。然而，如果 b.css 依赖于 a.css，您可能希望使用 'strict' 来阻止文件被合并，并改为按它们被导入的顺序加载——这可能会导致更多的块和请求。

对于大多数应用程序，我们推荐 true，因为它能带来更少的请求和更好的性能。