如何配置Webpack,以实现对css的Tree Shaking?
发布于 作者:苏南大叔 来源:程序如此灵动~

最近的几篇文章,苏南大叔说的都是前端代码的TreeShaking
。本文以webpack
的角度,再来看css
的TreeShaking
功能。本文相关文章的目标,就是更好的优化打包体积。如果一段css
代码没有被用到,优化掉它,也是情理之中的事情。
苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。测试环境:win10
,node@20.18.0
,webpack@5.98.0
。本文将介绍如何在Webpack
中配置CSS
,并实现Tree Shaking
功能,以减少最终打包文件的大小。
前文回顾
本文的兄弟文章是:
本文的主要内容,和上面两篇文章描述的内容差不多。只不过是更换了新的视角而已。相关的文章还有:
- https://newsn.net/say/webpack-public-path-plugin.html
- https://newsn.net/say/webpack-chunk.html
- https://newsn.net/say/webpack-postcss.html
安装必要的软件
需要安装一些必要的npm
软件包:
npm install --save-dev webpack webpack-cli css-loader mini-css-extract-plugin css-minimizer-webpack-plugin purgecss-webpack-plugin glob html-webpack-plugin style-loader
这些npm包的作用如下:
webpack
:Webpack的核心,用于打包模块化的JavaScript文件。webpack-cli
:Webpack的命令行工具,提供与Webpack交互的命令。css-loader
:用于解析CSS文件,并将其转换为JavaScript模块。mini-css-extract-plugin
:将CSS提取到单独的文件中,而不是内联到JavaScript中。css-minimizer-webpack-plugin
:优化和压缩CSS文件,减少文件体积。purgecss-webpack-plugin
:用于移除未使用的CSS样式,实现Tree Shaking功能。glob
:用于匹配文件路径模式,通常与PurgeCSS插件一起使用。html-webpack-plugin
:简化HTML文件的创建,特别是对于包含打包输出的文件。style-loader
:将CSS注入到DOM中。
通过安装和配置这些npm
包,苏南大叔可以优化项目的打包过程,减少最终生成文件的体积,提高加载速度和性能。
配置Webpack
接下来,苏南大叔需要配置Webpack
,创建或修改webpack.config.js
文件。
const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new CssMinimizerPlugin({}),
new PurgeCSSPlugin({
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
title: 'sunan App',
})
],
optimization: {
minimize: true,
minimizer: [
`...`,
new CssMinimizerPlugin(),
],
},
mode: 'production'
};
- 使用
mini-css-extract-plugin
实现的css
代码单独提取为文件。 - 使用
purgecss-webpack-plugin
来实现的TreeShaking
功能。 - 使用
css-minimizer-webpack-plugin
实现的空白行的删除,以及类的合并。 - 使用
HtmlWebpackPlugin
实现css
文件的调用。
模版处理小技巧
为了能够让webpack
对css
文件进行更完美的处理。在编写模版文件的时候,
- 里面并没有使用
link:css
进行调用。而是在index.js
文件里面使用import
导入了两个css
文件。 - 另外,对于
script
的脚本调用,模版里面也没有添加。而是选择让html-webpack-plugin
插件自动添加。
src/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- <link rel="stylesheet" href="css.css"> -->
<div class="used-class">这个类被使用了,显示绿色</div>
<!-- <script src="index.js"></script> -->
</body>
</html>
总结
通过以上配置,苏南大叔在Webpack
中成功配置CSS
,并实现Tree Shaking
功能,从而优化打包体积。更多苏南大叔的博客文章,请点击:


