webpack-css tree shaking

1、什么是css tree shaking？
css tree shaking就是指将多余的、没有使用过的样式从css文件中剔除。

2、实现css tree shaking
目录结构：

base.css和app.js文件如下：

/* base.css */
html {
  background: red;
}

.box {
  height: 200px;
  width: 200px;
  border-radius: 3px;
  background: green;
}

.box--big {
  height: 300px;
  width: 300px;
  border-radius: 5px;
  background: red;
}

.box-small {
  height: 100px;
  width: 100px;
  border-radius: 2px;
  background: yellow;
}

// app.js
import './base.css'

// 给 app 标签再加一个 div 并且类名为 box
var app = document.getElementById('app')
var div = document.createElement('div')
div.className = 'box'
app.appendChild(div)

index.html模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="app">
      <div class="box-big"></div>
    </div>
  </body>
</html>

可以看到.box-small样式没有用到，我们来实现css tree shaking看看是不是将.box-small样式清除了

PurifyCSS将帮助我们进行CSS Tree Shaking操作。为了能准确指明要进行 Tree Shaking 的 CSS 文件，还有glob-all（另一个第三方库）。

glob-all的作用就是帮助 PurifyCSS 进行路径处理，定位要做 Tree Shaking 的路径文件。

安装依赖：

npm i glob-all purify-css purifycss-webpack --save-dev

更改配置文件：

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将css单独打包成文件
const PurifyCss = require('purifycss-webpack')
const glob = require('glob-all')

module.exports = {
  entry: {
    main: './css-shaking/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'build'), // 打包文件的输出目录
    filename: '[name].bundle.js', // 代码打包后的文件名
    publicPath: './', // 引用的路径或者 CDN 地址
    chunkFilename: '[name].js' // 代码拆分后的文件名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '自动生成html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        minifyCSS: true
      },
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      chunks: ['main']
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    // 清除无用 css
    new PurifyCss({
      paths: glob.sync([
        // 要做 CSS Tree Shaking 的路径文件
        path.resolve(__dirname, './*.html'),// 请注意，我们同样需要对 html 文件进行 tree shaking
        path.resolve(__dirname, './css-shaking/*.js')
      ])
    })
  ]
}

比较打包前后的样式文件：

webpack-css tree shaking

记得要微笑

引用和评论

如何使用 webpack 优化 lodash