如何移除Nuxt 3构建中的Render-blocking CSS？

针对你提到的Nuxt 3默认内联样式同时添加缓存用样式表链接导致渲染阻塞的问题，有以下两种可行方案：

一、彻底移除缓存样式表链接 #

通过Nuxt的app:rendered钩子修改最终输出的HTML，移除所有Nuxt生成的样式表链接。

在项目的plugins目录下创建remove-css-links.ts文件，写入以下代码：

export default defineNuxtPlugin({
  hooks: {
    'app:rendered'(html) {
      // 匹配并移除head和body中所有Nuxt生成的样式表链接
      const cssLinkRegex = /<link rel="stylesheet" href="\/_nuxt\/.*?\.css">/g
      html.head = html.head.replace(cssLinkRegex, '')
      html.body = html.body.replace(cssLinkRegex, '')
    }
  }
})

注意：彻底移除后，浏览器无法缓存这些样式表，后续访问会重复加载内联样式，需根据你的流量场景权衡利弊。

二、延迟加载样式表（避免渲染阻塞） #

不删除样式表链接，而是将其改为预加载并延迟生效，既保留缓存能力又消除阻塞。

同样在plugins目录下创建lazy-load-css.ts文件：

export default defineNuxtPlugin({
  hooks: {
    'app:rendered'(html) {
      const transformCssLink = (content: string) => {
        return content.replace(/<link rel="stylesheet" href="(.*?)">/g, (match, href) => {
          // 只处理Nuxt生成的样式链接
          if (href.includes('/_nuxt/')) {
            return `<link rel="preload" href="${href}" as="style" onload="this.onload=null;this.rel='stylesheet'" media="print">`
          }
          return match
        })
      }
      html.head = transformCssLink(html.head)
      html.body = transformCssLink(html.body)
    }
  }
})

补充优化：为避免首次加载时出现无样式内容闪烁（FOUC），建议在Nuxt配置中内联关键页面的核心样式，保证首屏渲染时样式可用。

三、调整Nuxt构建配置（可选） #

如果不需要缓存样式表，可以直接在nuxt.config.ts中禁用CSS代码拆分，让所有样式始终内联：

export default defineNuxtConfig({
  build: {
    cssCodeSplit: false
  }
})

这个配置会让Nuxt不再生成单独的样式表文件，自然也就不会出现阻塞的链接，但同样会失去样式缓存的优势。

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