本文主要讲解使用purifycss-webpack来实现css的Tree Shaking，Tree Shaking意思是摇树，即为将项目中没有用到的css代码或js代码过滤掉，不将其打包到文件中，本章知识结构：
- 项目准备
- 使用purifycss
- 功能测试
项目准备
1、使用css-loader和style-loader
不了解的请先查看文章：https://blog.csdn.net/u010982507/article/details/81277151
2、使用extract-text-webpack-plugin
不了解的请先查看文章：https://blog.csdn.net/u010982507/article/details/81337529
3、使用postcss-cssnext
不了解的请先查看文章：https://blog.csdn.net/u010982507/article/details/81412335
使用purifycss
1、安装purify-css
npm install purify-css --save-dev
2、安装purifycss-webpack
npm install purifycss-webpack --save-dev
3、安装glob-all
// glob-all用于处理多路径文件，使用purifycss的时候要用到glob.sync方法。
npm install glob-all --save-dev
4、配置webpack.config.js
- 引入purifycss-webpack和glob-all
var PurifyCss = require('purifycss-webpack');
var glob = require('glob-all');
- 在plugins中配置
new PurifyCss({
paths: glob.sync([ // 传入多文件路径
path.resolve(__dirname, './*.html'), // 处理根目录下的html文件
path.resolve(__dirname, './src/*.js') // 处理src目录下的js文件
])
})
- 整个webpack.config.js的配置
var path = require("path");
var PostCss_CssNext = require('postcss-cssnext');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
var PurifyCss = require('purifycss-webpack'); // 引入PurifyCss
var glob = require('glob-all');// 引入glob-all
module.exports = {
entry: {
index: "./src/index.js"
},
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "dist/",
filename: '[name].bundle.js',
chunkFilename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({ // 使用ExtractTextWebpackPlugin插件提取css
fallback: {// 这里表示不提取的时候，使用什么样的配置来处理css
loader: 'style-loader',
options: {
singleton: true // 表示将页面上的所有css都放到一个style标签内
}
},
use: [ // 提取的时候，继续用下面的方式处理
{
loader: 'css-loader',
options: {
minimize: true // 开启压缩
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss', // 表示下面的插件是对postcss使用的
plugins: [
PostCss_CssNext(), // 允许使用未来的css（包含AutoPrefixer功能）
]
}
}
]
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin({ // 将js中引入的css文件提取到[name].min.css文件中
filename: '[name].min.css' // 配置提取出来的css名称
}),
new PurifyCss({
paths: glob.sync([ // 传入多文件路径
path.resolve(__dirname, './*.html'), // 处理根目录下的html文件
path.resolve(__dirname, './src/*.js') // 处理src目录下的js文件
])
})
]
}
功能测试
测试项目，不了解的请查看https://blog.csdn.net/u010982507/article/details/81412335
1、测试html中的tree shaking
- 在index.html中创建几个div
<div class="box">
</div>
<div class="big-box">
</div>
- 在base.css中添加样式
.box {
transition: transform 1s;
width: calc(100% - 100px);
height: calc(100% / 2.2);
background: black;
}
.big-box {
width: 200px;
height: 200px;
background: blue;
}
.middle-box {
width: 150px;
height: 150px;
background: white;
}
.small-box {
width: 100px;
height: 100px;
background: orange;
}
- 执行打包命令webpack
因为在index.html中没有使用small-box和middle-box两个class，所以打包后的index.min.css中会过滤掉这两个class，不会打包进去。
2、测试js中的tree shaking - 在index.js中创建新的div放到className为box的div下
import './css/base.css'
var box = document.getElementsByClassName('box')[0];
var middleBox = document.createElement('div');
middleBox.className = 'middle-box';
box.appendChild(middleBox);
- 执行打包命令webpack
查看index.min.css文件，发现打包文件已经包含middle-box，但是small-box没有用到，所以还是没有打包进去。
