CSS 是前端开发过程中不可或缺的一部分，但是 CSS 文件大小也会成为网站性能瓶颈之一。CSSNano 就是一个用来压缩 CSS 文件的 npm 包，可以很好地减小文件大小，提高页面加载速度。
安装和使用
要安装 cssnano，只需要在终端输入以下命令：
npm install cssnano
安装成功后，在项目中引入 cssnano 的方法也很简单。在 webpack 配置文件中配置 postcss-loader 和 cssnano 插件即可。
以 webpack 4.x 为例，在 webpack.config.js 中添加如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
------- -
------ -
-
----- ----------
---- -
----------------------------
-------------
-
------- -----------------
-------- -
--------------- -
-------- -
-
----------
-
------- ----------
--
--
--
--
--
--
--
--
--
--
-------- ---- ------------------------
--上面这段代码中，我们通过 postcss-loader 引入了 cssnano 插件，并且使用了默认的 preset 来进行 CSS 压缩。
示例代码
以下是一个简单的示例，展示了如何使用 cssnano 压缩 CSS 文件：
/* before */
body {
margin: 0;
padding: 0;
}
/* after */
body{margin:0;padding:0}总结
通过上面的介绍和示例，我们可以看到 cssnano 的使用非常简单，只需要在 webpack 配置文件中配置 postcss-loader 和 cssnano 插件，就可以轻松地压缩 CSS 文件，提高页面加载速度。在实际开发中，我们可以根据自己的情况来选择不同的 preset 和插件，以满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46549