CSSnano-browser 是 CSSnano 的浏览器版本，它可以在浏览器中使用，处理 CSS 文件并压缩输出。CSSnano-browser 获取 CSnano 的内核，采用了相同的优化策略，可以大幅优化 CSS。
安装
在项目中使用 npm 安装 CSSnano-browser：
npm install cssnano-browser
快速上手
CSSnano-browser 直接提供了一个方法 process(css: string, options?: Options): string，将传进来的 CSS 样式字符串进行压缩和处理。
import cssnano from 'cssnano-browser'; const css = ` /* CSS 样式代码*/ `; const minifiedCss = cssnano.process(css); console.log(minifiedCss);
选项
CSSnano-browser 支持的选项对应了 CSSnano 的选项，并添加了一些浏览器优化选项，下面介绍几个重要的选项。
preset
CSSnano-browser 提供了一些预设的选项，方便开发者直接使用：
default: CSSnano 默认的预设选项，满足大多数的 CSS 压缩需求。safe: 安全模式的预设选项，确保保护有歧义的源代码。
在使用预设选项时，无需再手动配置选项。下面是一个使用预设选项的示例：
-- -------------------- ---- ------- ------ ------- ---- ------------------ ----- --- - - -- --- ------ -- -- -------- ----- ----------- - -------------------- - ------- --------- --- ------------------------- -- ---------- ----- ------- - -------------------- - ------- ------ --- ---------------------
autoprefixer
autoprefixer 是一款自动补全 CSS 前缀的插件，它可以自动补全浏览器厂商前缀，使得我们的样式可以兼容多个浏览器。CSSnano-browser 将支持使用 autoprefixer 自动补全前缀。
-- -------------------- ---- -------
------ ------- ---- ------------------
------ ------------ ---- ---------------
----- --- - -
-- --- ------
--
----- ----------- - -------------------- -
------------- -
--------- ------ - ---------- -------- -- -----
-
---
-------------------------在上述代码中，我们使用 autoprefixer 自动补全 last 2 versions 和 Android >= 4.0 的浏览器前缀。这将确保您的样式可以在最新的两个版本的浏览器和 Android 4.0+ 的版本上工作。
discardComments
discardComments 是一个布尔值选项，其默认值为 true。此选项指定是否删除 CSS 中的注释。如果开启此选项，则注释将被删除。
-- -------------------- ---- ------- ------ ------- ---- ------------------ ----- --- - - -- --- ------ -- -- -- -- ----- ----------- - -------------------- - ---------------- ---- --- -------------------------
在上述代码中，我们将 discardComments 选项设置为 true，将会删除 CSS 中的注释。
总结
CSSnano-browser 是一款非常优秀的 CSS 压缩工具，可以将 CSS 文件进行压缩和处理，使用简单。通过本文的学习，我们了解了 CSSnano-browser 的安装和使用方法以及详细的选项说明。我们相信，在实际的开发过程中，使用 CSSnano-browser 一定可以提高我们的生产效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fc3