NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件

一、NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题

1、问题背景

  关于Nuxt的css嵌入到html代码中的问题,效果如下:

  项目很大,这个 css 就会很大,会影响 SEO 的收录。

2、解决方案

  解决方案其实很简单:在nuxt.config.js文件中的build对象添加extractCSS: { allChunks: true },extractCSS是将内嵌的css提取到外部,allChunks代表所有的都执行,代码如下:

build: {
    extractCSS: { allChunks: true }
}

  保存后,再次查看网页源代码发现就没有内嵌css了,而是2个css文件。

  并且网页所用到的css都会合并成两个文件,一个公共的未加scoped的,一个是加了scoped的。

二、Vue 提取 CSS 到单个文件

  vue官网也提供了提取 CSS 到单个文件的方法

1、安装插件:npm install extract-text-webpack-plugin --save-dev

2、使用

复制代码
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}
复制代码

  上述内容将自动处理 *.vue 文件内的 <style> 提取,并与大多数预处理器一样开箱即用。

  注意这只是提取 *.vue 文件 - 但在 JavaScript 中导入的 CSS 仍然需要单独配置。

3、手动配置:将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例

复制代码
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' // <- 这是vue-loader的依赖,所以如果使用npm3,则不需要显式安装
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}
复制代码

 

posted @   古兰精  阅读(2261)  评论(1编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2018-07-10 将url的查询参数解析成字典对象
点击右上角即可分享
微信分享提示