cssChunking

CSS 分块是一种通过将 CSS 文件分割和重新排序为块来提高 Web 应用程序性能的策略。这允许你只加载特定路由所需的 CSS，而不是一次性加载应用程序的所有 CSS。

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

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

export default nextConfig

next.config.js
/** @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.css 和 b.css（a 在 b 之前，或 b 在 a 之前），true 将以任何顺序合并文件并假设它们之间没有依赖关系。但是，如果 b.css 依赖于 a.css，你可能想要使用 'strict' 来防止文件被合并，而是按照导入的顺序加载它们 - 这可能导致更多的块和请求。

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

选项​

选项