跳到内容
配置next.config.jsinlineCss

inlineCss

此功能目前处于实验阶段，可能会有所更改，不建议用于生产环境。欢迎试用并在 GitHub 上分享您的反馈。

用法

实验性支持在 <head> 中内联 CSS。启用此标志后，所有通常生成 <link> 标签的地方都将改为生成 <style> 标签。

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}
 
export default nextConfig

权衡

何时使用内联 CSS

内联 CSS 在以下几种场景中可能很有益

  • 首次访问者：由于 CSS 文件是渲染阻塞资源，内联消除了首次访问者遇到的初始下载延迟，从而提高了页面加载性能。

  • 性能指标：通过消除 CSS 文件的额外网络请求，内联可以显著提高关键指标，如首次内容绘制 (FCP) 和最大内容绘制 (LCP)。

  • 慢速连接：对于使用较慢网络的用户，每个请求都会增加相当大的延迟，内联 CSS 可以通过减少网络往返次数来显著提高性能。

  • 原子 CSS 包（例如 Tailwind）：对于像 Tailwind CSS 这样的实用工具优先框架，页面所需的样式大小通常与设计的复杂性呈 O(1) 关系。这使得内联成为一个引人注目的选择，因为当前页面的所有样式集都很轻巧，并且不会随页面大小而增长。内联 Tailwind 样式可确保最小的有效负载，并消除了对额外网络请求的需求，从而进一步提高性能。

何时不使用内联 CSS

虽然内联 CSS 对性能有显著好处，但在某些情况下它可能不是最佳选择

  • 大型 CSS 包：如果您的 CSS 包太大，内联它可能会显著增加 HTML 的大小，导致首次字节时间 (TTFB) 变慢，并可能对慢速连接的用户造成更差的性能。

  • 动态或特定于页面的 CSS：对于具有高度动态样式或使用不同 CSS 集的应用程序，内联可能会导致冗余和臃肿，因为所有页面的完整 CSS 可能需要重复内联。

  • 浏览器缓存：在访问者频繁返回您的站点的情况下，外部 CSS 文件允许浏览器有效地缓存样式，减少后续访问的数据传输。内联 CSS 会消除此优势。

仔细评估这些权衡，并考虑将内联与其他策略（例如关键 CSS 提取或混合方法）相结合，以获得针对您的网站需求量身定制的最佳结果。

须知:

此功能目前处于实验阶段，并有一些已知限制

  • CSS 内联全局应用，不能按页面配置
  • 样式在初始页面加载期间会重复 - 在 SSR 的 <style> 标签中一次，在 RSC 有效负载中一次
  • 导航到静态渲染的页面时，样式将使用 <link> 标签而不是内联 CSS，以避免重复
  • 此功能在开发模式下不可用，仅适用于生产构建