# @csstools/postcss-slow-plugins 中文文档 规范地址：https://npmcn.com/package/%40csstools/postcss-slow-plugins/ 版本：3\.0\.0 npm 元数据更新时间：2026-01-14T07:25:30.720Z 中文译文更新时间：2026-11-11T03:32:08.852Z 软件包许可：MIT-0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40csstools/postcss-slow-plugins 原文对照：https://npmcn.com/package/%40csstools/postcss-slow-plugins/?lang=original 项目主页：https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-slow-plugins#readme 源码仓库：https://github.com/csstools/postcss-plugins ## 关键信息（来自 npm 元数据） - 包体积（解压后）：12.9 kB，6 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=20\.19\.0 - 运行依赖：0 个 - peer 依赖：postcss ^8\.4 - 首次发布：2023-09-04T21:09:35.916Z - 最新版本发布：2026-01-14T07:25:30.549Z - 近 30 天下载量：79926（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：5（近 12 个月 1 个） ## 中文简介 在您的 PostCSS 配置中识别慢插件 ## 安装 ```sh npm install @csstools/postcss-slow-plugins ``` 也可以使用：`pnpm add @csstools/postcss-slow-plugins`、`yarn add @csstools/postcss-slow-plugins`、`bun add @csstools/postcss-slow-plugins` ## README # PostCSS 慢速插件 [![PostCSS Logo](https://postcss.github.io/postcss/logo.svg)](https://github.com/postcss/postcss) `npm install @csstools/postcss-slow-plugins --save-dev` [PostCSS 慢速插件](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-slow-plugins) 允许您轻松检查哪个插件对您的构建持续时间影响最大. PostCSS令人难以置信地快,但添加过多的插件或几个缓慢的插件仍然会引起问题. PostCSS设置缓慢的典型原因是: - 你有很多CSS系统 - 您有许多插件 - 一个特定的插件非常缓慢 这个插件的用意是使它能明显看出哪个插件对CSS处理的持续时间影响最大. 我们也欢迎任何人报告业绩问题,以便改进流行插件的性能. 然而,我们要求每个人都尊重这一点. 没有人需要解决你的表演问题. 我们强烈认为,CSS后设置能够而且应当迅速而高效. ## 如何衡量 [PostCSS 慢速插件](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-slow-plugins) 本身也只是一个 PostCSS 插件. 简单地添加到您的配置中, 就像您想要其它插件一样, 运行您的构建 . 这需要很长时间. 说真的,很长一段时间. 它将为每个插件描述您两次的构造 : - 一次只有那个插件 **已禁用** - 一次只有那个插件 **启用** 当剖析它会运行你的建筑 20次得到一个平均的时间. 所以,希望这需要 `N * 20 * 2` 比你正常的建筑还要长. ## 改进业绩的一些提示 - 保证你 `browserslist` 配置是准确和最新的 - 保证 `caniuse-lite` 最新数据 - 添加最小插件的 dev 特定配置 - 删除做小事的插件 - 删除一次性生成的静态值的插件 ## 示例输出 ``` Analyzing with file: plugins/postcss-slow-plugins/test/basic.css Most impactful to improve, ordered by drop in duration when excluded: ┌─────────┬───────────┬─────────────┬──────────┬──────────────────────────────────────────┬───────────────────────┐ │ (index) │ duration │ kb's per ms │ drop │ name │ index in plugins list │ ├─────────┼───────────┼─────────────┼──────────┼──────────────────────────────────────────┼───────────────────────┤ │ 0 │ '10.69ms' │ '0.93kb/ms' │ '--' │ '-- all plugins --' │ '--' │ │ 1 │ '6.88ms' │ '1.45kb/ms' │ '3.80ms' │ 'postcss-gradients-interpolation-method' │ 9 │ │ 2 │ '7.12ms' │ '1.40kb/ms' │ '3.56ms' │ 'postcss-progressive-custom-properties' │ 25 │ │ 3 │ '7.13ms' │ '1.40kb/ms' │ '3.55ms' │ 'postcss-normalize-display-values' │ 18 │ │ 4 │ '7.28ms' │ '1.37kb/ms' │ '3.41ms' │ 'postcss-color-mix-function' │ 10 │ │ 5 │ '7.28ms' │ '1.37kb/ms' │ '3.40ms' │ 'postcss-stepped-value-functions' │ 20 │ │ 6 │ '7.29ms' │ '1.37kb/ms' │ '3.39ms' │ 'postcss-cascade-layers' │ 23 │ │ 7 │ '7.32ms' │ '1.36kb/ms' │ '3.36ms' │ 'postcss-trigonometric-functions' │ 21 │ │ 8 │ '7.32ms' │ '1.36kb/ms' │ '3.36ms' │ 'postcss-color-function' │ 14 │ │ 9 │ '7.33ms' │ '1.36kb/ms' │ '3.36ms' │ 'postcss-ic-unit' │ 19 │ │ 10 │ '7.34ms' │ '1.36kb/ms' │ '3.35ms' │ 'postcss-lab-function' │ 12 │ └─────────┴───────────┴─────────────┴──────────┴──────────────────────────────────────────┴───────────────────────┘ Most impactful to improve, ordered by increase in duration when running alone: ┌─────────┬───────────┬──────────────┬──────────────────────────────────────────┬───────────────────────┐ │ (index) │ duration │ kb's per ms │ name │ index in plugins list │ ├─────────┼───────────┼──────────────┼──────────────────────────────────────────┼───────────────────────┤ │ 0 │ '2.17ms' │ '4.61kb/ms' │ 'postcss-gradients-interpolation-method' │ 9 │ │ 1 │ '2.00ms' │ '5.00kb/ms' │ 'postcss-relative-color-syntax' │ 11 │ │ 2 │ '1.96ms' │ '5.09kb/ms' │ 'postcss-lab-function' │ 12 │ │ 3 │ '1.94ms' │ '5.14kb/ms' │ 'postcss-color-mix-function' │ 10 │ │ 4 │ '1.83ms' │ '5.46kb/ms' │ 'postcss-nesting' │ 3 │ │ 5 │ '1.82ms' │ '5.50kb/ms' │ 'postcss-custom-media' │ 0 │ │ 6 │ '1.81ms' │ '5.50kb/ms' │ 'postcss-color-function' │ 14 │ │ 7 │ '1.76ms' │ '5.68kb/ms' │ 'postcss-normalize-display-values' │ 18 │ │ 8 │ '1.75ms' │ '5.72kb/ms' │ 'postcss-custom-selectors' │ 4 │ │ 9 │ '1.73ms' │ '5.77kb/ms' │ 'postcss-stepped-value-functions' │ 20 │ │ 10 │ '1.72ms' │ '5.79kb/ms' │ 'postcss-trigonometric-functions' │ 21 │ └─────────┴───────────┴──────────────┴──────────────────────────────────────────┴───────────────────────┘ ``` ## 使用量 添加 [PostCSS 慢速插件](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-slow-plugins) 对您的项目: ```bash npm install postcss @csstools/postcss-slow-plugins --save-dev ``` 当作一个 [邮政](https://github.com/postcss/postcss) 插件 : ```js const postcss = require('postcss'); const postcssSlowPlugins = require('@csstools/postcss-slow-plugins'); postcss([ postcssSlowPlugins(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## 选项 ### 忽略 这个 `ignore` 选项允许您跳过特定配置插件. 这样做有助于排除那些至关重要的插件. ```js postcssSlowPlugins({ ignore: ['postcss-oklab-function'] }) ``` ## 常见问题 ### @csstools/postcss-slow-plugins 是什么？ 在您的 PostCSS 配置中识别慢插件 ### 如何安装 @csstools/postcss-slow-plugins？ 在项目目录运行 npm install @csstools/postcss-slow-plugins，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：postcss（^8\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @csstools/postcss-slow-plugins 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @csstools/postcss-slow-plugins 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @csstools/postcss-slow-plugins 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @csstools/postcss-slow-plugins 可以商用吗？ @csstools/postcss-slow-plugins 使用 MIT-0 许可。声明的许可为 MIT-0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。 ### @csstools/postcss-slow-plugins 的下载量有多少？ 根据 npm 官方下载统计，@csstools/postcss-slow-plugins 在 2026/10/11 – 2026/11/09 这 30 天内被下载 79,926 次，日均约 2,664 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @csstools/postcss-slow-plugins 还在维护吗？ 最新版本 3\.0\.0 发布于 2026/01/14（9 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 1 个；首次发布于 2023/09/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。