Next.js 14中如何预加载CSS文件？TailwindCSS场景解决方案咨询

一、给自动生成的CSS添加preload属性 #

Next.js会自动注入Tailwind编译后的CSS文件，要为其添加rel="preload"，可通过自定义_document.js（或_document.tsx）实现：

1. 在项目pages目录下创建/修改_document.js：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 筛选出自动生成的CSS文件路径
    const cssFileName = initialProps.styles.find(style => style.href?.includes('_next/static/css'))?.href;
    return { ...initialProps, cssFileName };
  }

  render() {
    const { cssFileName } = this.props;
    return (
      <Html>
        <Head>
          {/* 先添加预加载标签 */}
          {cssFileName && (
            <link
              rel="preload"
              href={cssFileName}
              as="style"
            />
          )}
          {/* 保留原有样式表标签，预加载完成后自动解析 */}
          {this.props.styles}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

• 逻辑：通过getInitialProps获取Next.js自动生成的CSS路径，手动插入preload标签，同时保留原有的样式表引入，让浏览器优先预加载资源，完成后自动转为样式表解析。

二、其他优化方案 #

• 开启Next.js CSS优化：Next.js 12+已默认开启CSS压缩优化，若需确认，可在next.config.js中配置：

module.exports = {
  optimizeCss: true,
};

该配置会压缩CSS体积，间接提升加载速度。

• 内联关键CSS：提取页面首屏必需的Tailwind样式，内联到_document.js的<Head>的<style>标签中，避免外部CSS的阻塞。
• 确保Tailwind JIT模式启用：Tailwind v3默认开启JIT模式，它会按需生成CSS，大幅减少最终CSS文件大小。可在tailwind.config.js中确认：

module.exports = {
  mode: 'jit',
  // 其他配置项
};

注意事项 #

• 不要直接修改Next.js自动生成的link标签，通过_document.js是官方推荐的自定义页面结构的方式。
• preload标签必须放在原样式表标签之前，才能起到优先加载的作用。

内容的提问来源于stack exchange，提问作者Nikita