Nuxt3: SEO优化——抽取页面内部Style标签样式

一、需求描述

升级Nuxt 3.12.4之后发现html增大，页面有大量的Style标签引入的css：

为了减少页面加载大小，需要将这些css抽取到独立的css文件中。

二、解决方案

Nuxt官网提供的有关extract css的有关配置大致有以下情况：
在nuxt.config.ts中配置：

（1）如果用的是webpack：

webpack: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true
    }
}

详情参考《https://nuxt.com/docs/api/nuxt-config#extractcss》

（2）如果用的是vite:
最新版本的Nuxt 3.12.4：

 features: {
  inlineStyles: false
 }

如果没有inlineStyles配置项或者inlineStyles无效，则使用：

experimental: { 
	inlineSSRStyles: false 
}