在前端开发中，优化打包是一项重要的技术，而 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 的优秀功能。希望这篇文章能够给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1a8
