我们相信:世界是美好的,你是我也是。 来玩一下解压小游戏吧!

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

苏南大叔:如何配置Webpack,以实现对css的Tree Shaking? - webpack-css-tree-shaking
如何配置Webpack,以实现对css的Tree Shaking?(图3-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。测试环境:win10node@20.18.0webpack@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文件的调用。

模版处理小技巧

为了能够让webpackcss文件进行更完美的处理。在编写模版文件的时候,

  • 里面并没有使用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