inlineCss

用法

¥Usage

在 <head> 中对内联 CSS 的实验性支持。启用此标志后，我们通常生成 <link> 标签的所有位置都将生成 <style> 标签。

¥Experimental support for inlining CSS in the <head>. When this flag is enabled, all places where we normally generate a <link> tag will instead have a generated <style> tag.

import type { NextConfig } from 'next'

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

export default nextConfig

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

module.exports = nextConfig

权衡

¥Trade-Offs

何时使用内联 CSS

¥When to Use Inline CSS

内联 CSS 在几种情况下很有用：

¥Inlining CSS can be beneficial in several scenarios:

首次访问者：由于 CSS 文件是渲染阻塞资源，内联消除了首次访问者遇到的初始下载延迟，从而提高了页面加载性能。

¥First-Time Visitors: Since CSS files are render-blocking resources, inlining eliminates the initial download delay that first-time visitors experience, improving page load performance.
性能指标：通过删除 CSS 文件的额外网络请求，内联可以显著改善关键指标，如首次内容绘制 (FCP) 和最大内容绘制 (LCP)。

¥Performance Metrics: By removing the additional network requests for CSS files, inlining can significantly improve key metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
连接速度慢：对于网络较慢的用户，每个请求都会增加相当大的延迟，内联 CSS 可以通过减少网络往返来提供明显的性能提升。

¥Slow Connections: For users on slower networks where each request adds considerable latency, inlining CSS can provide a noticeable performance boost by reducing network roundtrips.
Atomic CSS Bundles（例如 Tailwind）：使用 Tailwind CSS 等实用优先框架，页面所需样式的大小通常相对于设计的复杂性为 O(1)。这使得内联成为一个引人注目的选择，因为当前页面的整个样式集都很轻量，并且不会随着页面大小而增大。内联 Tailwind 样式可确保最小负载并消除对额外网络请求的需求，从而进一步提高性能。

¥Atomic CSS Bundles (e.g., Tailwind): With utility-first frameworks like Tailwind CSS, the size of the styles required for a page is often O(1) relative to the complexity of the design. This makes inlining a compelling choice because the entire set of styles for the current page is lightweight and doesn’t grow with the page size. Inlining Tailwind styles ensures minimal payload and eliminates the need for additional network requests, which can further enhance performance.

何时不使用内联 CSS

¥When Not to Use Inline CSS

虽然内联 CSS 为性能提供了显着的好处，但在某些情况下它可能不是最佳选择：

¥While inlining CSS offers significant benefits for performance, there are scenarios where it may not be the best choice:

大型 CSS 打包包：如果你的 CSS 包太大，内联它可能会显著增加 HTML 的大小，导致首次字节时间 (TTFB) 变慢，并且对于连接速度较慢的用户来说，性能可能会更差。

¥Large CSS Bundles: If your CSS bundle is too large, inlining it may significantly increase the size of the HTML, resulting in slower Time to First Byte (TTFB) and potentially worse performance for users with slow connections.
动态或页面特定的 CSS：对于具有高度动态样式或使用不同 CSS 集的页面的应用，内联可能会导致冗余和膨胀，因为可能需要重复内联所有页面的完整 CSS。

¥Dynamic or Page-Specific CSS: For applications with highly dynamic styles or pages that use different sets of CSS, inlining may lead to redundancy and bloat, as the full CSS for all pages may need to be inlined repeatedly.
浏览器缓存：在访问者频繁返回你的网站的情况下，外部 CSS 文件允许浏览器有效地缓存样式，从而减少后续访问的数据传输。内联 CSS 消除了这种好处。

¥Browser Caching: In cases where visitors frequently return to your site, external CSS files allow browsers to cache styles efficiently, reducing data transfer for subsequent visits. Inlining CSS eliminates this benefit.

仔细评估这些权衡，并考虑将内联与其他策略（例如关键 CSS 提取或混合方法）相结合，以获得最适合你网站需求的最佳结果。

¥Evaluate these trade-offs carefully, and consider combining inlining with other strategies, such as critical CSS extraction or a hybrid approach, for the best results tailored to your site's needs.

很高兴知道：

¥Good to know:

此功能目前处于实验阶段，并且有一些已知的限制：

¥This feature is currently experimental and has some known limitations:

CSS 内联是全局应用的，不能按页面配置

¥CSS inlining is applied globally and cannot be configured on a per-page basis

初始页面加载期间样式重复 - 一次在 SSR 的 <style> 标签内，一次在 RSC 有效负载中

¥Styles are duplicated during initial page load - once within <style> tags for SSR and once in the RSC payload

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

¥When navigating to statically rendered pages, styles will use <link> tags instead of inline CSS to avoid duplication

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

¥This feature is not available in development mode and only works in production builds

用法​

权衡​

何时使用内联 CSS​

何时不使用内联 CSS​

用法

权衡

何时使用内联 CSS

何时不使用内联 CSS