在前端开发中，优化打包是一项重要的技术，而 CSS 打包的优化也是其中的一项。在工程项目中，添加一些无用的 CSS 样式，将使网页加重并增加实际加载时间。为了解决这个问题，我们可以使用 CSS Tree Shaking 技术来实现优化。
在本文中，我将介绍 npm 包 webpack-css-treeshaking-plugin，这是一个可以通过删除无用 CSS 样式来进行 CSS 优化的 webpack 插件。该插件可以帮助我们自动地剪裁 CSS 中未使用的样式，从而大幅度减少 CSS 文件的大小。
安装
首先我们需要安装webpack和webpack-css-treeshaking-plugin插件：
npm install webpack webpack-cli webpack-css-treeshaking-plugin --save-dev
使用方法
在 webpack 的配置文件中，我们需要引入 webpack-css-treeshaking-plugin 插件和 mini-css-extract-plugin 插件。在 optimization.optimizationCss 配置中，我们将使用此插件来实现优化：
-- -------------------- ---- -------
----- ---- - ---------------
----- -------------------- - ----------------------------------
----- ----------------------- - ---------------------------------------------
----- - -------------------- - - -----------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ----------------------------- -------------
-
-
--
-------- -
--- ----------------------
--------- ---------------------------
---
--- ----------------------
------- -----
-------- ----
---
--- -------------------------
--
------------- -
---------- ---------
------------- ---------
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- -----
--
------- -
----- ---------
----- ---------
------- ------
-------- ----
-
-
--
--------- -----
---------- -
--- -------------------------
-
-
-参数配置
- strict: 是否默认开启严格模式，默认为关闭模式。
- verbose: 是否输出所有不必要的信息，默认为输出不必要信息，所以需要设置为 false。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ---------------
----- ---------------- ---------------------------------
-------
------
---- ----------------
--------- -------------
------ - --------------
------
-------
-------import './style.css'
console.log('Hello webpack running!')结论
在本文中，我们使用了 webpack-css-treeshaking-plugin 插件实现了优化 CSS 打包。通过将无用 CSS 样式剪裁，我们可以大幅度减少 CSS 文件的大小，从而提高网页的加载速度。通过此插件的使用，我们可以优化项目的 CSS 打包效率，也可以发挥出 webpack 的优秀功能。希望这篇文章能够给大家带来帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/600560d881e8991b448df1a8