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

news2024/11/15 21:09:42

一、需求描述

升级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 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1971288.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

问界M7是不是换壳东风ix7? 这下有答案了

文 | AUTO芯 作者 | 谦行 终于真相大白了 黑子们出来挨打啊 问界M7是换壳的东风ix7? 你们没想到,余大嘴会亲自出来正面回应吧 瞧瞧黑子当时乐的 问界你可以啊!靠改名字造车呢? 还有更过分的,说M7是东风小康ix7…

新买的电脑硬盘怎么分区?让数据管理无忧

随着科技的飞速发展,电脑已经成为我们日常生活和工作中不可或缺的工具。当我们购买了一台新电脑或者更换了新的硬盘后,为了更好地管理数据和提高电脑性能,对硬盘进行分区是一个明智的选择。那么,新买的电脑硬盘怎么分区呢&#xf…

多人同屏渲染例子——2、VAT的实现

Unity引擎制作万人同屏效果 大家好,我是阿赵。 之前分析了多人同屏的一些思路。在我的思路里面,把角色骨骼动画转换成顶点动画是一个比较中心的思想。 一、资源分析 比如我这里有一只狼的模型: 它的身上挂着Animator,通过骨骼动画…

从C++看C#托管内存与非托管内存

进程的内存 一个exe文件,在没有运行时,其磁盘存储空间格式为函数代码段全局变量段。加载为内存后,其进程内存模式增加为函数代码段全局变量段函数调用栈堆区。我们重点讨论堆区。 托管堆与非托管堆 C# int a10这种代码申请的内存空间位于函…

(亲测)taro不是内部或外部命令,也不是可运行的程序 或批处理文件。

目录 报错 原因 解决方法(亲测) 报错 报错:taro不是内部或外部命令,也不是可运行的程序 或批处理文件。 原因 全局成功安装后,taro指令还是不能使用,此时需要手动添加环境变量。 解决方法&#xff08…

python字符串数据容器练习(replace,split,count)

一、要求 二、代码实现 str "itheima itcast boxuegu" num str.count("it") print(f"[num]") str1 str.replace(" " , "|") print(str1) str2 str1.split("|") print(str2) 三、知识点总结 Python字符串是由…

深入理解Vue slot的原理

文章目录 前言为什么需要插槽作用域插槽插槽的原理总结 前言 插槽是Vue中一个重要的特性,它有很多种用法:默认插槽、具名插槽、作用域插槽。尤其作用域插槽,还有一堆特性,比如解构prop,解构prop的时候还可以进行属性名…

[CISCN2019 华北赛区 Day2 Web1]Hack World1

试试数字1 2 3朝后都是 猜测为数字型注入 试试1 union select flag from flag 爆破发现都被过滤了,尝试用布尔盲注,用python编写脚本,得到flag

浅谈SPI

目录 前言JDK SPIJDBC SPIServiceLoader实现原理小结 SpringSpringBoot SPI实现原理Debug小结 Dubbo SPI如何使用实现原理 前言 SPI,英文全称是Service Provider Interface,直译是“服务提供接口”或“服务提供者接口”,是一种基于ClassLoad…

YOLOv8目标检测算法改进之融合SCconv的特征提取方法

引言 YOLO目标检测算法历经发展,目前已经成为了目标检测领域的经典算法。当前,YOLO目标检测算法已经更新到YOLOv10,但从大家的反映来看,YOLOv10的效果并不理想(该算法的创新点是提升检测速度,并不提升精度&#xff0c…

JVM: 方法调用

文章目录 一、介绍二、方法调用的原理1、静态绑定2、动态绑定(1)介绍(2)原理 一、介绍 在JVM中,一共有五个字节码指令可以执行方法调用: invokestatic: 调用静态方法。invokespecial:调用对象…

大模型参与城市规划中的应用

人工智能咨询培训老师叶梓 转载标明出处 传统的城市规划往往依赖于专业规划师的经验和判断,耗时耗力,且难以满足居民多样化的需求。近年来,大模型(LLMs)的崛起为城市规划领域带来了新的机遇。清华大学电子工程系的Zhil…

微信小程序多端框架实现app内自动升级

多端框架生成的app,如果实现app内自动升级? 一、Android 实现app自动升级,华为应用市场 1、获取 应用市场地址 下载地址 2、在微信开放平台进行配置 应用下载地址:应用市场点击分享,里面有一个复制连接功能 应用市…

XMLDecoder反序列化

XMLDecoder反序列化 基础知识 就简单讲讲吧,就是为了解析xml内容的 一般我们的xml都是标签属性这样的写法 比如person对象以xml的形式存储在文件中 在decode反序列化方法后,控制台成功打印出反序列化的对象。 就是可以根据我们的标签识别是什么成分…

QT多媒体编程(一)——音频编程知识详解及MP3音频播放器Demo

目录 引言 一、QtMultimedia模块简介 主要类和功能 二、QtMultimedia相关类及函数解析 QAudioInput QAudioOutput QAudioFormat QMediaPlayer QMediaPlaylist QCamera 三、音频项目实战Demo UI界面 核心代码 运行结果 四、结论 引言 在数字时代,音频…

ArcGIS for js 分屏(vue项目)

一、引入依赖 import {onMounted, ref} from "vue"; import Map from "arcgis/core/Map"; import MapView from "arcgis/core/views/MapView"; import WebTileLayer from "arcgis/core/layers/WebTileLayer"; 二、页面布局 <tem…

22. Hibernate 性能之缓存

1. 前言 本节和大家一起聊聊性能优化方案之&#xff1a;缓存。通过本节学习&#xff0c;你将了解到&#xff1a; 什么是缓存&#xff0c;缓存的作用&#xff1b;HIbernate 中的缓存级别&#xff1b;如何使用缓存。 2. 缓存 2.1 缓存是什么 现实世界里&#xff0c;缓存是一个…

纪念二2024.07 federated-解决mysql跨库联表问题

若需要创建FEDERATED引擎表&#xff0c;则目标端实例要开启FEDERATED引擎。从MySQL5.5开始FEDERATED引擎默认安装 只是没有启用&#xff0c;进入命令行输入 show engines ; FEDERATED行状态为NO。 mysql安装配置文件 一、连接工具查看是否开启federated show engines 二、m…

VMware Workstation17 安装 CentOS7 教程

今天给伙伴们分享一下VMware Workstation17 安装 CentOS7 教程&#xff0c;希望看了有所收获。 我是公众号「想吃西红柿」「云原生运维实战派」作者&#xff0c;对云原生运维感兴趣&#xff0c;也保持时刻学习&#xff0c;后续会分享工作中用到的运维技术&#xff0c;在运维的路…

JS【详解】内存泄漏(含泄漏场景、避免方案、检测方法),垃圾回收 GC (含引用计数、标记清除、标记整理、分代式垃圾回收)

内存泄漏 在执行一个长期运行的应用程序时&#xff0c;应用程序分配的内存没有被释放&#xff0c;导致可用内存逐渐减少&#xff0c;最终可能导致浏览器崩溃或者应用性能严重下降的情况&#xff0c;即 JS 内存泄漏 可能导致内存泄漏的场景 不断创建全局变量未及时清理的闭包&…