Menu

inlineCss

用法

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

next.config.ts
TypeScript
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 内联是全局应用的，不能在每个页面的基础上配置
  • 在初始页面加载期间样式会被复制——一次在 <style> 标签中用于 SSR，一次在 RSC 负载中
  • 当导航到静态渲染的页面时，样式将使用 <link> 标签而不是内联 CSS 以避免重复
  • 此功能在开发模式下不可用，仅在生产构建中有效