Nuxt项目网页源代码包含大量的css问题解决方案

最新推荐文章于 2024-02-25 14:15:12 发布
最新推荐文章于 2024-02-25 14:15:12 发布
阅读量963 收藏 3
点赞数 1
分类专栏： vue 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BubbleABC/article/details/130891490
版权

像以下这种的源代码：
在这里插入图片描述

为什么会产生这个问题？

我们正常的前端项目是会有一个个的css和js文件，但是Nuxt项目在经过webpack打包后整合到了一起。

这是把element-ui的组件中的样式全部整合进来了。

我们知道网络爬虫在爬取你的网页数据时不能进行JS的动态编译，但是像上述中这一坨css是可以被爬取的。
爬虫的到的网页源代码就包含了这些无用信息（对于爬虫来说是无用的，会降低他们对网页质量的判断），同样会印象网站的响应速度这样是不利于网站做SEO的！

解决方案：

修改nuxt.config文件

// 将内嵌CSS样式提取到外部
extractCSS: { allChunks: true },

在这里插入图片描述
再次查看源代码即可。。。

钟Bubble
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
nuxt-purgecss：删除多余CSS！ Nuxt.js的简洁PurgeCSS包装器
02-06
Nuxt PurgeCSS-删除多余CSS！ 产品特点 轻松删除不需要CSS Webpack或PostCSS模式 已经带有强大的默认设置 建立在 Nuxt 2（仅Nuxt 2）支持 经过全面测试！ 建立 将nuxt-purgecss依赖项添加到您的项目中 yarn add --dev nuxt-purgecss # or npm install --save-dev nuxt-purgecss 添加nuxt-purgecss到buildModules的部分nuxt.config.js export default { buildModules : [ // Simple
nuxt-pwa-tailwindcss-starter：Nuxt.js + PWA + TailwindCSS入门项目
02-05
Nuxt PWA TailwindCSS入门 Nuxt.js + PWA + TailwindCSS入门项目 产品特点 此入门项目包括用于最佳PWA项目的官方Nuxt.js模块： 最好的Vue的UI框架也丰富了它： 建立 # install dependencies $ yarn # Or npm install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ yarn build $ yarn start # generate static p
nuxt CSS 存放到独立文件进行SEO优化
最新发布
hzether的博客
02-25 459
最后，重新运行Nuxt.js服务器或者编译前端静态文件，就会自动将CSS样式从主要的JavaScript文件中分离出来，存放于独立的.css文件中。在Nuxt.js中将CSS样式从单个文件分离为多个独立的文件可以通过使用extract-text-webpack-plugin来完成。nuxt CSS 到独立文件。
nuxt-breaky:在开发过程中在Nuxtjs中显示您的Tailwind CSS断点
03-21
脆弱的 使用tailwindcss 时，在Nuxtjs中显示Tailwind CSS断点 介绍 breaky可帮助您更快地创建响应式设计。它扩展了真棒的 。 breaky在您的顺风配置中读取您定义的断点，并根据您的浏览器窗口宽度显示当前活动的断点。 该插件仅在开发模式期间加载，不会干扰您的生产版本。 要求 确保安装了tailwindcss-module: ^1.4.0 （或更高版本）。 设置 将@teamnovu/nuxt-breaky添加为项目的开发依赖项 yarn add @teamnovu/nuxt-breaky --dev # or npm install @teamnovu/nuxt-breaky --save-dev 添加@teamnovu/nuxt-breaky到buildModules的部分nuxt.config.js 注意：如果您使用的是早于v2.9请使用“ module
js 怎么提取css,Nuxt.js将页面中css样式提取到一个css文件中
weixin_36438511的博客
08-04 848
看下未提取的css的部分源码实现将页面中css提取到link的方法比较简单：在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }即可。build: {extractCSS: { allChunks: true },}注意：npm run dev 启动项目后是没有任何变化，要先运行npm run build，在运行 npm start...
将Nuxt.js搭建的网站中css样式提取到一个css文件中
weixin_34261415的博客
08-21 799
原文发布在我的个人博客上，欢迎访问：原文链接 开局先看一张图 ::: 当你鼠标右键查看你的网站源码，不知道看到这样的一堆代码你内心有何感受呢？作为有强迫症的我看着真是浑身难受。。。为什么这些样式不会被单独打包到一个文件中而要全部在页面中中呢。。。。 经过一番搜索，终于找到了解决的方法 网上好像这类资料真的比较少（可能是我找的姿势不对）原文链接 先来看看优化后的代码 ::: 是不是顿时就...
nuxt3引入css，导致线上页面产生大量css代码的解决方法
zoujunjian的博客
09-04 522
【代码】nuxt3引入css，导致线上页面产生大量css代码的解决方法。
Nuxt之css分离（处理因css在服务端渲染而增加源代码量，从而影响到SEO）
Lonely Hobo的博客
11-27 3388
关于Nuxt的css嵌入到html代码中的问题，之前被这个问题困扰了很久，效果如下： 后台找到了解决方案，用了外部引入方法: export default { head: { link:[{href:"/css/index.css"}] } } 这样html中就没有嵌入css了，而是link标签引入，但是这样就会造成一个问题，那就是打包发布后，在浏览器上会重复加载css...
Nuxt.js 的详细使用以及踩的坑
热门推荐
空晓天
09-28 1万+
Nuxt.js 的使用 安装 1、nuxt.js 基于 vue 因此使用 vue 进行项目创建，nuxt.js 官方提供一个模板，我们就以这个模板进行 nuxt 项目的创建。其创建代码为： vue init nuxt-community/starter-template '你的项目名称' 回车之后会进行模板下载，务必联网； 模板下载好之后，会让你填写一些基本信息，可以直接回车选择默认就好，如下图： 模板的目录结构如下： node_modules 文件夹是需要我们安装依赖之后才有的； 2、安装依赖 进入
vue-ssr框架nuxt填坑
qq_32849999的博客
03-18 364
参考：https://blog.csdn.net/xxbc5286072/article/details/83022209
Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题
weixin_43160498的博客
12-26 3946
nuxt3 动态渲染图片打包路径问题以及打包css路径
详解nuxt sass全局变量(公共scss解决方案)
11-30
恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢 “包子”的帮助 注意 本案例 只是把你通用 的 比如  $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 以上这种通用的变量抽出来...
tailwindcss-module:Nuxt 的 Tailwind CSS 模块
08-03
将@nuxtjs/tailwindcss依赖项添加到您的项目中 # Using npm npm install --save-dev @nuxtjs/tailwindcss # Using yarn yarn add --dev @nuxtjs/tailwindcss 添加@nuxtjs/tailwindcss到buildModules的部分nuxt.con
Vue.js 框架源码与进阶 - NuxtJS 基础
时光海的博客
01-03 355
NuxtJS 基础10.1 NuxtJS 介绍NuxtJS 是什么NuxtJS 特性NuxtJS 框架是如何运作的10.2 创建项目初始化 NuxtJS案例代码分支说明10.3 NuxtJS 路由基础路由路由导航动态路由嵌套路由自定义路由配置10.4 NuxtJS 视图模板布局页面10.5 NuxtJS 异步数据asyncData上下文对象10.6 NuxtJS 生命周期10.7 NuxtJS 渲染流程 10.1 NuxtJS 介绍 NuxtJS 是什么 官网 GitHub 仓库 Nuxt.js 是一个
Nuxt.js将css提取到link后，刷新加载时会闪屏？可能是你用的方式不对
椰卤工程师的个人博客
05-11 2773
nuxt.js关于如何从页面中将css提取到link，大家百度、谷歌后会发现关于nuxt.js的文章并不多，解决方法基本都是： 在nuxt.config.js下的build里添加 extractCSS: { allChunks: true } 这句话，如下图 有的同学会发现，npm run dev 后没有任何变化，不要着急，试下npm run build 再 npm start，就会成功了。 当然这个方法简单粗暴，同时也会带来一个小问题———在刷新加载css时，页面会出现闪烁，然后才会出现渲染好的页面。
项目问题记录---vue+nuxtjs项目网页源代码包含大量的css问题解决方案
TotoroChinchilla的博客
01-18 443
在写项目时会，对网页进行源代码检查，会存在大量css样式，这中样式不利于SEO搜索引擎优化。
nuxt3使用总结
m0_56344602的博客
03-11 2253
目前来说nuxt3基本上已经成熟(在使用之后感觉社区还是没有那么成熟，踩了不少坑)，目前项目已经成功上线，在项目过程中遇到不少问题没有找到答案，都是自己摸索出来的，希望本篇文章能帮助各位小伙伴少走弯路。
nuxt项目：css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】
snowball的博客
04-13 1710
一、warning信息 chunk pages/channelManagement/qualification/create/pages/channelManagement/qualification/detail/pages/chan/c61aa583 [extract-css-chunks-webpack-plugin] Conflicting order. Following module has been added: * css ./node_modules/css-loader/d
【腾讯云 Cloud Studio 实战训练营】使用在线编程的方式用Nuxt3开发一个后台管理系统（附源码）
weixin_42553583的博客
08-28 389
CSDN近期联合腾讯云、Coding、CloudStudio组织了【腾讯云Cloud Studio实战训练营活动】，苦于前些日子一直在备考注册会计师，没有很好的体验Cloud Studio的云IDE产品。现在考试结束了，体验了一把云IDE,不禁感慨云端开发原来可以这么爽。
nuxt项目的网页源代码太乱
04-05
，如何优化？ 有几个方法可以优化Nuxt项目的网页源代码： 1. 使用Nuxt的优化功能：Nuxt提供了一些内置的优化功能，例如静态化、压缩、分割代码等。你可以在nuxt.config.js文件中配置这些功能。 2. 合理使用组件：在Nuxt项目中，组件是非常重要的。如果你在一个组件中使用了太多的代码，那么它的源代码就会变得非常臃肿。因此，你应该将组件拆分成更小的组件，并尽可能地重用它们。 3. 减少依赖：Nuxt项目可能会依赖很多第三方库和插件。如果你使用了太多的依赖，那么你的源代码将变得非常庞大。因此，你应该尽可能地减少依赖，只依赖于你实际需要的库和插件。 4. 优化图片：图片是网页中占用空间最大的元素之一。你可以使用适当的压缩算法来减小图片的大小，从而减少网页的加载时间。 5. 使用CSS预处理器：CSS预处理器可以帮助你更有效地组织和管理CSS代码。它们可以帮助你减少重复的代码，并使你的CSS代码更易于维护。 6. 使用代码分割：Nuxt提供了代码分割功能，可以将你的代码分割成更小的块，从而减少每个页面的加载时间。 综上所述，通过使用Nuxt的优化功能、合理使用组件、减少依赖、优化图片、使用CSS预处理器和使用代码分割等方法，可以有效地优化Nuxt项目的网页源代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钟Bubble

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值