vue 中移除没有使用的class和id 样式

前言

  1. 因为在多次迭代后的项目有很多不用的样式,如果一直留着就会导致文件过大,在用户访问的时候请求时间加大,所以需要优化这方面的代码
  2. 所以我这边在项目 build 的时候,就需要移除多余不用的样式代码进行简单的优化

npm安装与使用

    1、使用到的npm包有  “purifycss-webpack” ,“purify-css”,“glob

cnpm i --save purifycss-webpack purify-css glob

    2、在 webpack.config.js 或者 vue.config.js 引入 (主要看你vue项目是什么版本的)

const Purify = require('purifycss-webpack') // css优化去重复无效代码
const glob = require('glob') // css优化

   3、然后在 webpack.config.js 或者 vue.config.js中 的 plugins 写入 

plugins: [
      new Purify({ // css优化去重去无效代码
        // 找到src下的vue 文件
        paths: glob.sync(path.join(__dirname, 'src/*.vue'))
        // 找到src下的html 文件
        //paths: glob.sync(path.join(__dirname, 'src/*.html'))
      })
    ],

注意: 如果文件中 有 htmlWebpackPlugin,一定要放在htmlWebpackPlugin后面写 第三步的内容

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值