前言
在前端开发中，优化 CSS 代码是非常有必要的。cssnano-preset-simple 是一个用于压缩和优化 CSS 代码的 npm 包。该包使用了一系列的插件来实现对 CSS 代码的各项优化。
安装
首先，我们需要在项目中安装 cssnano-preset-simple。
使用 npm 安装：
npm install cssnano-preset-simple --save-dev
使用 yarn 安装：
yarn add cssnano-preset-simple --dev
使用
安装完成后，在项目的 webpack 配置文件中进行配置。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------------- - ---------------------------------
-- ---
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-- ---
-
------- -----------------
-------- -
--------------- -
-------- -
-- ---
---------
------- --------------------
---
--
--
--
--
--
--
--
--
--插件
cssnano-preset-simple 包括多个插件，这些插件可以自由组合使用。
autoprefixer
对 CSS 的样式进行前缀添加，使其在多个浏览器中都能够正常显示。例如：
.box {
display: flex;
}添加前缀后：
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}discardComments
删除 CSS 文件中的注释。例如：
/* 这是一个注释 */
.box {
display: flex;
}压缩后：
.box{display:flex}mergeLonghand
将 CSS 中所有可以合并的属性进行合并。例如：
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}合并后：
.box {
margin: 10px 20px;
}mergeRules
合并 CSS 文件中重复的规则。例如：
.box1 {
display: flex;
}
.box2 {
display: flex;
}合并后：
.box1,.box2{display:flex}minifyFontValues
缩写字体属性。例如：
h1 {
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: "Microsoft YaHei";
}缩写后：
h1 {
font: bold 16px/1.5 "Microsoft YaHei";
}minifySelectors
压缩选择器，删除多余的空格和换行符。例如：
.box {
display: flex;
}
.box .item {
width: 100px;
}压缩后：
.box{display:flex}.box .item{width:100px}normalizeDisplayValues
使用标准的 CSS 属性值替换非标准值。
例如，inline-flex 替换为 flex，inline-grid 替换为 grid 等。
normalizeRepeatStyleValues
使用标准的 CSS 属性值替换非标准值。
例如，repeat-x 替换为 repeat no-repeat 等。
normalizeString
对 CSS 值中的字符串进行标准化。例如：
.box {
content: "Hello, " attr(title) "!";
font-family: "Microsoft YaHei";
}标准化后：
.box {
content: "Hello, " attr(title) "!";
font-family: "Microsoft YaHei";
}注：标准化字符串原意为处理字符串的引号是否需要加上。
示例代码
下面是一个示例 CSS 文件。
-- -------------------- ---- ------- -- ----------- -- ---- - -------- ----- ------ ------ ----------- ----- -------------- ----- ------------ ----- ------------- ----- ---------- ----- ------------ ---------- ------- -
使用 cssnano-preset-simple 进行压缩和优化。
-- -------------------- ---- -------
-- -----------------
-- ---
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- -----------------
-------- -
--------------- -
-------- -
------------------------
--------------------
------- ---------------------------------
---
--
--
--
--
--
--
--
--
--使用处理后的 CSS 文件：
/* example.css */
.box{display:flex;width:300px;margin:10px 20px;font: 16px "Microsoft YaHei"}总结
cssnano-preset-simple 是一个用于压缩和优化 CSS 代码的 npm 包。通过自由组合使用多个插件，可以实现对 CSS 代码的各项优化。在前端开发中，优化 CSS 代码是非常有必要的，可以大大提升网页或应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5effd494403f2923b035bc42