Skip to content

NextJS中文文档 - CssChunking

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

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

tsx
import type { NextConfig } from 'next'

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

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

module.exports = nextConfig

选项

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

如果你遇到意外的 CSS 行为,可以考虑使用 'strict'。例如,如果你在不同文件中以不同的 import 顺序(ab 之前,或 ba 之前)导入 a.cssb.css,则 true 将以任意顺序合并文件,并假设它们之间没有依赖关系。但是,如果 b.css 依赖于 a.css,你可能希望使用 'strict' 来防止文件被合并,而是按照导入顺序加载它们 - 这可能会导致更多的块和请求。

对于大多数应用程序,我们建议使用 true,因为它会减少请求数量并提高性能。

🎉有任何问题,欢迎联系我

WeChat QR Code
WeChat
QQ QR Code
QQ

赣ICP备2023003243号