PurifyCSS
去除多余的css。
// Installation
npm i -D purify-css
import purifycss from "purify-css"
const purifycss = require("purify-css")
let content = "<button class="button-active"> Login </button>"
let css = ".button-active { color: green; } .unused-class { display: block; }"
let options = {
output: "filepath/output.css"
}
purify(content, css, options)
// output
.button-active { color: green; }
purify-webpack
依賴于purifycss碘箍，Configure as follows:
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
module.exports = {
entry: {...},
output: {...},
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].[contenthash].css'),
// Make sure this is after ExtractTextPlugin!
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'app/*.html')),
})
]
};
In order to use this plugin to look into multiple paths you will need to:
npm install --save glob-all
const glob = require('glob-all');
paths: glob.sync([
path.join(__dirname, '.php'),
path.join(__dirname, 'partials/.php')
])
參考：
https://github.com/purifycss/purifycss
https://github.com/webpack-contrib/purifycss-webpack
