如何理解PurgeCSS对css代码的TreeShaking技术？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

TreeShaking可以想象成用力摇树，把树叶摇下来。Tree Shaking的概念，不但可以用于js，还可以用于css。通过消除未使用代码来优化CSS包大小，在编译时确定哪些 CSS类是未使用的，并将其从最终的打包文件中移除。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，node@20.18.0，webpack@5.98.0。本文讲述通过PostCSS和PurgeCSS对CSS代码进行TreeShaking。

PostCSS + PurgeCSS

PostCSS是一个基于JavaScript的CSS处理工具，它通过插件系统对CSS进行转换和优化。PurgeCSS是一个专门用于移除未使用CSS的工具。它通过静态分析HTML、JavaScript等文件，找出项目中实际使用的CSS样式，然后移除未使用的样式，从而大幅减小CSS文件的大小。

龙套代码

有两组跑龙套的代码，一个是传统的html文件的使用方法，另外一个是通过js文件引入的css。

龙套一，在html中使用css

龙套角色，创建包含两个类的文件css.css：

.used-class {
    color: green;
}
.unused-class {
    color: red;
}

创建一个 HTML 文件，只使用 used-class：

<link rel="stylesheet" href="css.css">
<div class="used-class">这个类被使用了，显示绿色</div>

龙套二，在js中使用css

css2.css：

.used-class2 {
    color: green;
}
.unused-class2 {
    color: red;
}

也可以在 JavaScript 文件中导入CSS文件。

import './css2.css';
const div = document.createElement('div');
div.className = 'used-class2';
div.textContent = '这个类被使用了，显示绿色';
document.body.appendChild(div);

配置相关工具

可以使用下面的命令，安装相应的工具：

npm install --save-dev @fullhuman/postcss-purgecss postcss-cli postcss postcss-import

创建postcss.config.js文件：

const purgecss = require('@fullhuman/postcss-purgecss').default;
module.exports = {
  plugins: [
    require('postcss-import'),
    purgecss({
      content: ['./src/**/*.html', './src/**/*.js'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
};

这里引入purgecss的时候，后面的.default语句是重点。否则就会得到require(...) is not a function的相关提示。

执行命令

使用PurgeCSS来移除未使用的CSS类，执行命令：

postcss src/css.css -o dist/css.css && postcss src/css2.css -o dist/css2.css

通过测试可以得知：在index.html和index.js里面，是否加载相关的css文件并不重要，重要的剩下的代码里面，是否引用相关的类。

直觉上来说，苏南大叔觉得这个基于PostCSS的PuregeCSS的TreeShaking，并不靠谱...逻辑上更像是正则匹配，而不是基于语义上的分析。

相关文章

• https://newsn.net/say/webpack-purgecss.html

结论

Tree Shaking是一种强大的优化技术，可以显著减少CSS包的大小。通过使用支持Tree Shaking的工具，可以确保最终的打包文件只包含实际使用的代码，从而提高应用的性能。

但是，这个PostCss和PurgeCss的组合，仅仅处理css文件。并不会对其它的配套文件做处理。所以，使用上还是存在局限性的。更多苏南大叔的css相关经验文章，请参考：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。