前言
- 因为在多次迭代后的项目有很多不用的样式,如果一直留着就会导致文件过大,在用户访问的时候请求时间加大,所以需要优化这方面的代码
- 所以我这边在项目 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后面写 第三步的内容