跳到主要内容

inlineCss

用法​

实验性支持在 <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 以避免重复
  • 此功能在开发模式下不可用，仅在生产构建中工作
最后于 更新