Menu

cssChunking

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

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

next.config.ts
TypeScript
import type { NextConfig } from 'next'
 
const nextConfig = {
  experimental: {
    cssChunking: 'loose', // 默认值
  },
} satisfies NextConfig
 
export default nextConfig
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: 'loose', // 默认值
  },
}
 
module.exports = nextConfig

选项

  • 'loose' (默认值)：Next.js 会尽可能合并 CSS 文件，通过导入顺序确定文件之间的显式和隐式依赖关系，以减少分块数量，从而减少请求数量。
  • 'strict'：Next.js 将按照文件中导入的正确顺序加载 CSS 文件，这可能会导致更多的分块和请求。

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

对于大多数应用，我们推荐使用 'loose'，因为它会产生更少的请求并提供更好的性能。