内联 CSS

用法

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

typescript

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    inlineCss: true,
  },
}

module.exports = 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 payload 中

导航到静态渲染页面时，样式将使用 <link> 标签而不是内联 CSS，以避免重复

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

用法

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

typescript

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    inlineCss: true,
  },
}

module.exports = 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 payload 中
导航到静态渲染页面时，样式将使用 <link> 标签而不是内联 CSS，以避免重复
此功能在开发模式下不可用，仅在生产构建中有效

文档导航

用法

权衡

何时使用内联 CSS

何时不使用内联 CSS

用法

权衡

何时使用内联 CSS

何时不使用内联 CSS