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，以避免重复

此功能在开发模式下不可用，仅在生产构建中有效