前言
随着前端技术的不断发展，构建工具、框架和库的使用越来越普遍，NPM 成了我们必不可少的一个工具。在这些工具中，less、sass、stylus 是比较常见的 CSS 预处理语言，它们的存在使得我们能够更加高效地书写 CSS，同时也提供了对 CSS 进行预处理的能力。不过，我们写 CSS 的时候往往会忽视一些细节，比如，我们在使用 less、sass、stylus 时，可能会忽略一些复杂的嵌套关系，从而导致 CSS 代码难以维护，和其他开发者进行协作时也存在一定的困难。针对这些问题，我们通常会使用一些 lint 工具，如 Stylelint、ESLint 等。今天，让我们来介绍一个能够在编写 CSS 时自动删除未使用 CSS 类名的 npm 包：inviscss。
inviscss 是什么
inviscss 是一种在编译时自动删除未使用的 CSS 类名的工具。它可以分析您的 HTML 文件中使用的 CSS 类名，并删除未使用的 CSS 类名，这样可以减小 CSS 文件的大小，有效地提高页面加载速度。
使用教程
安装 inviscss
在使用 inviscss 之前，首先需要安装它。通过以下 npm 命令，我们可以在项目中安装 inviscss：
--- ------- -- --------
配置 inviscss
安装完成之后，我们需要在配置文件中添加 inviscss 的配置。在项目根目录下新建文件 .inviscssrc，文件内容如下：
- -------- ---------------- --------- ----------------- ------------ --- ------------------- -- -
- entry: 需要分析的 CSS 文件的路径，支持通配符。
- output: 处理后的 CSS 文件输出路径，支持通配符。
- whitelist: 以数组的方式配置无需删除的 CSS 类名。
- ignoredSelectors: 以数组的方式配置需要忽略的 CSS 选择器。
使用 inviscss
在完成以上配置之后，我们就可以使用 inviscss 进行 CSS 文件的优化了。在命令行中输入以下命令：
--------
这个命令会找到配置文件 .inviscssrc，根据文件中的配置进行优化处理。处理后的 CSS 文件会输出到配置文件中 output 指定的路径下。
示例代码
--------- -----
------
------
----- --------------- --
--------------- ----------
----- ---------------- ---------------------- --
-------
------
---- ------------------
------------ -------
----- -------- -------- --- ----- --- ------------------
------
-------
----------------- - ------- ----- - ---------- -- - ---------- ----- - ---------- - - ---------- ----- -
- -------- ---------------- --------- ----------------- ------------ --- ------------------- -- -
在上面的示例代码中，我们可以看到样式文件 index.css 中定义了 .container、.container h1 和 .container p 三个 CSS 类名，在 HTML 文件中，只有 container 类名被使用。如果不使用 inviscss 进行优化处理，那么 .container h1 和 .container p 两个选择器对应的样式代码就会变成“死代码”而被浏览器加载。而在使用 inviscss 进行优化处理之后，这两个选择器对应的样式代码会被自动删除，只有实际使用到的 CSS 代码被输出到 dist 目录下对应的 CSS 文件中。
总结
在实际开发中，我们使用各种工具进行优化，可以提高我们的开发效率和页面性能，从而提升用户体验。通过使用 inviscss 进行 CSS 文件的自动优化处理，可以避免因为忽略未使用的 CSS 类名而导致代码难以维护，同时也能有效地减小 CSS 文件的大小，提高页面加载速度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557a081e8991b448d4a20