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

像以下这种的源代码:
Nuxt项目网页源代码包含大量的css问题解决方案_第1张图片

为什么会产生这个问题?

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

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

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

解决方案:

修改nuxt.config文件

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

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

你可能感兴趣的:(vue,css,javascript,前端)