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

最近的几篇文章，苏南大叔说的都是前端代码的TreeShaking。本文以webpack的角度，再来看css的TreeShaking功能。本文相关文章的目标，就是更好的优化打包体积。如果一段css代码没有被用到，优化掉它，也是情理之中的事情。

苏南大叔：如何配置Webpack，以实现对css的Tree Shaking？ - webpack-css-tree-shaking
如何配置Webpack，以实现对css的Tree Shaking？（图3-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，node@20.18.0，webpack@5.98.0。本文将介绍如何在Webpack中配置CSS，并实现Tree Shaking功能，以减少最终打包文件的大小。

前文回顾

本文的兄弟文章是：

本文的主要内容，和上面两篇文章描述的内容差不多。只不过是更换了新的视角而已。相关的文章还有：

安装必要的软件

需要安装一些必要的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'
};

苏南大叔：如何配置Webpack，以实现对css的Tree Shaking？ - css的treeshaking效果
如何配置Webpack，以实现对css的Tree Shaking？（图3-2）

  • 使用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？ - 模版对比
如何配置Webpack，以实现对css的Tree Shaking？（图3-3）

总结

通过以上配置，苏南大叔在Webpack中成功配置CSS，并实现Tree Shaking功能，从而优化打包体积。更多苏南大叔的博客文章，请点击：

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   webpack