PostCSS 慢速插件 
npm install @csstools/postcss-slow-plugins --save-dev
PostCSS 慢速插件 允许您轻松检查哪个插件对您的构建持续时间影响最大.
PostCSS令人难以置信地快,但添加过多的插件或几个缓慢的插件仍然会引起问题.
PostCSS设置缓慢的典型原因是:
- 你有很多CSS系统
- 您有许多插件
- 一个特定的插件非常缓慢
这个插件的用意是使它能明显看出哪个插件对CSS处理的持续时间影响最大.
我们也欢迎任何人报告业绩问题,以便改进流行插件的性能.
然而,我们要求每个人都尊重这一点.
没有人需要解决你的表演问题.
我们强烈认为,CSS后设置能够而且应当迅速而高效.
如何衡量
PostCSS 慢速插件 本身也只是一个 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 慢速插件 对您的项目:
npm install postcss @csstools/postcss-slow-plugins --save-dev
当作一个 邮政 插件 :
const postcss = require('postcss');
const postcssSlowPlugins = require('@csstools/postcss-slow-plugins');
postcss([
postcssSlowPlugins(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
选项
忽略
这个 ignore 选项允许您跳过特定配置插件.
这样做有助于排除那些至关重要的插件.
postcssSlowPlugins({ ignore: ['postcss-oklab-function'] })