在前端开发中，CSS 是一个必不可少的部分，而 media query 用于响应式布局也是 CSS 中的重要内容。然而，因为 media query 语法相对繁琐，容易出现重复的 CSS 规则，造成代码冗余。为了解决这个问题，我们可以使用 npm 包 css-mqpacker。
什么是 css-mqpacker？
css-mqpacker 是一个能够整合重复的 media query 规则，提升 CSS 文件性能的 npm 包。使用 css-mqpacker，可以将多个 media query 合并成一个，从而减少 CSS 文件的大小。
如何使用 css-mqpacker？
安装
安装 css-mqpacker 可以通过如下命令：
npm install css-mqpacker --save-dev
配置
在安装完成后，在 postcss.config.js 文件中添加如下配置：
module.exports = {
plugins: [
require('css-mqpacker')()
]
}然后在编译 CSS 的时候，使用 postcss-cli，例如：
npx postcss style.css -o dist/style.css
示例
在使用 css-mqpacker 之前，一个常见的写法是将 media query 与规则分别写在不同的位置：
-- -------------------- ---- -------
------- -
----------------- -----
------- -----
-
------ ------ --- ----------- ------ -
------- -
----------------- -----
-
-在使用 css-mqpacker 之后，这些 media query 规则就可以整合成为一个：
-- -------------------- ---- -------
------- -
----------------- -----
------- -----
-
------ ------ --- ----------- ------ -
------- -
----------------- -----
-
-这样的做法可以减少文件大小，并且提高加载速度。同时，我们还可以使用 cssnano 压缩 CSS 文件，达到更好的性能优化效果。
总结
通过使用 css-mqpacker，可以将重复出现的 media query 代码整合在一起以减少 CSS 文件的大小，提升页面加载速度。虽然使用 css-mqpacker 可以优化页面性能，但是在实际项目中，需要根据情况按需使用。
参考资料：
CSS Post Processing with PostCSS
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56987