去除冗余的css
消除框架中未使用的CSS,初步达到按需引入的效果
使用背景:vue2.x, webpack3.x
使用插件:purifycss-webpack
安装:
npm i purifycss-webpack purify-css glob-all -D
安装后各个插件的版本:
“glob-all”: “^3.3.1”,
“purify-css”: “^1.2.5”,
“purifycss-webpack”: “^0.7.0”,
使用:
在 \build\webpack.prod.conf.js
const PurifyCSSPlugin = require('purifycss-webpack');
const glob = require('glob-all');
plugins: [
new PurifyCSSPlugin({
paths: glob.sync([
path.join(__dirname, '../index.html'),
path.join(__dirname, '../src/**/*.vue')
//注意:这里要写上所有用到css的地方
])
})
]
打包后效果:
原大小:
使用后:
页面效果一切正常,不过随便在vue文件里定义的,没有用到的一些css,并没有被删除掉
官网:
PurgeCSS 中文文档
PurifyCSS Plugin
还有个去除css的插件是purgecss-webpack-plugin
,但是使用一直不成功,暂时没有办法解决,可能和node版本有关