使用purifycss-webpack来实现Tree Shaking

本文主要讲解使用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

• 在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没有用到，所以还是没有打包进去。