inlineCss

此功能目前为实验性，可能会有变更，不建议在生产环境中使用。欢迎试用并在 GitHub 上分享您的反馈。

用法

实验性地支持将 CSS 内联到 <head> 中。启用此标志后，所有通常生成 <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，以避免重复

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