使用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'); // 引入PurifyCssvar glob = require('glob-all');// 引入glob-allmodule.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没有用到，所以还是没有打包进去。