webpack4 CSS Tree Shaking的使用

时间：2023-12-14

下面是webpack4的CSS tree shaking的使用攻略。

什么是CSS tree shaking

CSS tree shaking是一项优化技术，通过去除没有使用到的CSS代码，可以显著减小CSS的文件大小。在webpack4中，CSS tree shaking是通过PurgeCSS实现的，PurgeCSS是一个可以检查CSS中未使用样式的工具。

如何使用CSS tree shaking

1. 配置webpack.config.js

首先需要在webpack.config.js文件中添加PurgeCSS插件，下面是一个示例：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const PurgecssWebpackPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[local]_[hash:base64:5]'
              }
            }
          },
          'postcss-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin()]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.[hash:8].css'
    }),
    new PurgecssWebpackPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true })
    })
  ]
};

2. 添加要检查的文件路径

在webpack.config.js中，需要在PurgeCSS插件中添加要检查的文件路径，需要忽略的文件路径等信息。在示例代码中，我们使用了glob库来动态获取要检查的文件路径，代码如下：

new PurgecssWebpackPlugin({
  paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
  whitelist: ['html', 'body'],
  whitelistPatterns: [/^nav-/]
})

上面的例子表示要检查src目录下的所有文件，但是要排除目录。同时，我们也可以通过whitelist和whitelistPatterns选项来排除一些CSS代码。

3. 添加ignoreCSS选项

如果你使用了Less或者Sass等CSS预处理器，需要在webpack.config.js的PurgeCSS插件中添加ignoreCSS选项，这是因为PurgeCSS无法直接解析这些预处理器所编写的代码。示例代码如下：

new PurgecssWebpackPlugin({
  paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
  whitelist: ['html', 'body'],
  whitelistPatterns: [/^nav-/],
  ignoreCSS: ['^theme']
})

注意，ignoreCSS选项中的正则表达式必须匹配预处理器中的类名前缀。

CSS tree shaking示例说明

下面我将给出两个CSS tree shaking的示例：

示例1

在过去的网站制作中，开发者会频繁使用reset.css进行重置默认样式。但是在项目开发以后会发现css文件变大了，一些reset.css中的样式并没有用到。

例如reset.cs里面的h1-h6标签样式，我们通常在项目中基本上都自己定义了。这样reset.css中的不必要的样式就可以使用CSS tree shaking去除。代码如下：

/* reset.css */
h1{ font-size: 32px; }
h2{ font-size: 24px; }
h3{ font-size: 18px; }
h4{ font-size: 16px; }
h5{ font-size: 14px; }
h6{ font-size: 12px; }

使用CSS tree shaking后，只会保留有用的h1样式，而其他h2-h6样式就会被移除：

/* after css tree shaking */
h1{ font-size: 32px; }

示例2

在后端渲染的前端项目中，我们通常会使用一些第三方库，如Bootstrap。但是，这些库通常过大且包含一些我们使用不到的样式。通过CSS Tree Shaking，我们可以去除这些无用的CSS样式。

下面是一个以Bootstrap为例的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
  <script src="./index.js"></script>
</body>
</html>

在样式中我们只使用了.container一个类名，在webpack4环境下使用CSS Tree Shaking处理后，我们的生成的CSS文件中将只包含使用到的样式类名。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello, world!</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap.css">
  <link rel="stylesheet" href="./style.704c0d72.css">
</head>
<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
  <script src="./index.js"></script>
</body>
</html>

可以看到，处理后的CSS文件只包含了我们使用到的.container类名，而其他无用的样式都被去除了。

以上就是webpack4的CSS tree shaking的使用攻略。

上一篇：CSS3不透明度实例讲解 下一篇：HTML+CSS实现单选框、复选框美观的样式