前言
在前端开发中，我们通常会使用CSS进行页面样式的调整。但是随着项目规模的扩大，CSS样式表中的类名也会不断增加，导致CSS文件体积越来越大。此时，我们可以考虑使用npm包babel-plugin-remove-stylename来删除无用的类名，从而减小CSS文件大小。
babel-plugin-remove-stylename简介
babel-plugin-remove-stylename是基于Babel的插件，它可以将你的代码中无用的类名动态删除，从而减小代码体积。该插件可以检测你的代码中所有类名的引用情况，如果某个类名在代码中从未被引用过，那么它就会被删除掉。
安装
使用npm安装babel-plugin-remove-stylename:
npm install babel-plugin-remove-stylename --save-dev
配置
在.babelrc文件中添加以下代码：
-- -------------------- ---- -------
-
---------- -
-
--------------------------------
-
------------ ------------
--------- ------------------
-
-
-
-这个配置表示，插件会将没有被引用到的类名全部删除，并且保留名为myclass的类名。另外，插件会忽略所有位于node_modules目录下的文件。
示例代码
无用的类名
-- -------------------- ---- ------- -- --------- -- ------- - ----------------- -------- - -------- - ---------- ----- - ------- - ----------------- -------- -
使用该插件前
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------
------ ------- -------- ----- -
------ -
-----
------- ----------------------------------
----- ----------------------------------
------- ----------------------------------
------
--
-使用该插件后
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------
------ ------- -------- ----- -
------ -
-----
-----------------------
----- ----------------------------------
-----------------------
------
--
-可以看到，在没有使用该插件的情况下，所有类名都被保留了下来。而在使用该插件后，没有被引用的类名已经被删除了。
总结
使用babel-plugin-remove-stylename可以帮助我们减小CSS文件的大小，优化站点的加载速度。在使用过程中需要注意指定白名单和忽略目录，以保证插件删除类名的准确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556bc81e8991b448d3869