feat: minify css with esbuild, deprecate build.cleanCssOptions

[yyx990803]

I ran a simple benchmark comparing esbuild and clean-css (level 1 default options) minifying Tailwind's CDN build:

esbuild:
- 223.37ms
- size: 2894.35kb
clean-css:
- 1333.23ms
- size: 2865.22kb

esbuild is almost ~6x the speed while producing only ~1% larger output. I would say this is well worth it (it also allows us to drop an option, remove a dependency and its typings).

This would deprecate build.cleanCssOptions.

[dominikg]

for the record, here are more benchmarks:

dominikg@mb14:~/develop/css-minification-benchmark$ bin/bench.js --only clean-css,esbuild
.......................................

╔════════════════════════════════════╤════════════════════════════╤═════════════════════════════╤═══════════════════════════╗
║ File                               │ clean-css - 5.1.2          │ clean-css (level 2) - 5.1.2 │ esbuild - 0.12.16         ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ 960.css - 9989 bytes               │ 5772 bytes - 19.92 ms      │ 5772 bytes - 18.67 ms       │ 5773 bytes - 59.54 ms     ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ animate.css - 95374 bytes          │ 75274 bytes - 133.85 ms    │ 74510 bytes - 71.28 ms      │ 72015 bytes - 9 ms        ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ blueprint.css - 17422 bytes        │ 10796 bytes - 35 ms        │ 10646 bytes - 61.29 ms      │ 10797 bytes - 4.68 ms     ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ bootstrap.css - 199412 bytes       │ 161363 bytes - 243.54 ms   │ 159288 bytes - 353.36 ms    │ 160266 bytes - 21.2 ms    ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ font-awesome-all.css - 73117 bytes │ 58568 bytes - 151.26 ms    │ 58568 bytes - 113.37 ms     │ 58795 bytes - 8.06 ms     ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ foundation.css - 168014 bytes      │ 132603 bytes - 220.72 ms   │ 125186 bytes - 291.38 ms    │ 128818 bytes - 33.78 ms   ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ gumby.css - 167123 bytes           │ 151481 bytes - 125.92 ms   │ 149628 bytes - 125.18 ms    │ 152946 bytes - 26.9 ms    ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ inuit.css - 53050 bytes            │ 18184 bytes - 27.81 ms     │ 17635 bytes - 30.57 ms      │ 18181 bytes - 5.62 ms     ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ normalize.css - 6138 bytes         │ 1815 bytes - 3.89 ms       │ 1742 bytes - 7.91 ms        │ 1740 bytes - 2.74 ms      ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ oocss.css - 58623 bytes            │ 14493 bytes - 23.47 ms     │ 14167 bytes - 22.95 ms      │ 14782 bytes - 13.07 ms    ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ pure.css - 28843 bytes             │ 16797 bytes - 17.22 ms     │ 16500 bytes - 23.63 ms      │ 16466 bytes - 4.01 ms     ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ reset.css - 1092 bytes             │ 773 bytes - 0.67 ms        │ 773 bytes - 2.05 ms         │ 774 bytes - 2.94 ms       ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ tailwind.css - 2380419 bytes       │ 1941820 bytes - 1285.62 ms │ 1941515 bytes - 1372.97 ms  │ 1961566 bytes - 195.45 ms ║
╟────────────────────────────────────┼────────────────────────────┼─────────────────────────────┼───────────────────────────╢
║ TOTAL - 3258616 bytes              │ 2589739 bytes - 2288.89 ms │ 2575930 bytes - 2494.61 ms  │ 2602919 bytes - 386.99 ms ║
╚════════════════════════════════════╧════════════════════════════╧═════════════════════════════╧═══════════════════════════╝

Date: Wed, 28 Jul 2021 14:52:58 GMT
CPU: AMD Ryzen 5 4600H with Radeon Graphics
OS: Linux x64 5.12.15-051215-generic
Node.js: v14.17.1

source: GoalSmashers/css-minification-benchmark#98

[dominikg]

noticed in the first line of the previous comment esbuild is a lot slower than expected because of initial setup.

With a warmup call and comparing gzip, the picture is even better

dominikg@mb14:~/develop/css-minification-benchmark$ bin/bench.js --gzip --only clean-css,esbuild
.......................................

╔════════════════════════════════════╤═══════════════════════════╤═════════════════════════════╤══════════════════════════╗
║ File                               │ clean-css - 5.1.2         │ clean-css (level 2) - 5.1.2 │ esbuild - 0.12.16        ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ 960.css - 1703 bytes               │ 1049 bytes - 18.32 ms     │ 1049 bytes - 31.21 ms       │ 1066 bytes - 4.87 ms     ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ animate.css - 5841 bytes           │ 5142 bytes - 105.48 ms    │ 5126 bytes - 76.74 ms       │ 5071 bytes - 16.69 ms    ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ blueprint.css - 4974 bytes         │ 2886 bytes - 35.18 ms     │ 2864 bytes - 62.63 ms       │ 2905 bytes - 5.1 ms      ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ bootstrap.css - 26061 bytes        │ 23980 bytes - 236.78 ms   │ 23803 bytes - 383.09 ms     │ 23750 bytes - 28.5 ms    ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ font-awesome-all.css - 13090 bytes │ 12513 bytes - 33.45 ms    │ 12513 bytes - 117.63 ms     │ 12466 bytes - 10.93 ms   ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ foundation.css - 20143 bytes       │ 17160 bytes - 158.91 ms   │ 16865 bytes - 161.31 ms     │ 17166 bytes - 14.35 ms   ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ gumby.css - 22606 bytes            │ 20769 bytes - 115.24 ms   │ 20585 bytes - 117.52 ms     │ 20667 bytes - 32.59 ms   ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ inuit.css - 13915 bytes            │ 4136 bytes - 17.5 ms      │ 4037 bytes - 36.54 ms       │ 4073 bytes - 6.05 ms     ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ normalize.css - 1737 bytes         │ 771 bytes - 1.69 ms       │ 765 bytes - 4.78 ms         │ 721 bytes - 4.9 ms       ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ oocss.css - 8980 bytes             │ 3441 bytes - 18.87 ms     │ 3394 bytes - 31.58 ms       │ 3519 bytes - 7.22 ms     ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ pure.css - 6667 bytes              │ 3772 bytes - 15.31 ms     │ 3759 bytes - 29.89 ms       │ 3620 bytes - 5.31 ms     ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ reset.css - 615 bytes              │ 443 bytes - 0.61 ms       │ 443 bytes - 2.56 ms         │ 446 bytes - 2.08 ms      ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ tailwind.css - 193093 bytes        │ 187176 bytes - 1304.22 ms │ 187130 bytes - 1316.02 ms   │ 187399 bytes - 179.28 ms ║
╟────────────────────────────────────┼───────────────────────────┼─────────────────────────────┼──────────────────────────╢
║ TOTAL - 319425 bytes               │ 283238 bytes - 2061.56 ms │ 282333 bytes - 2371.5 ms    │ 282869 bytes - 317.87 ms ║
╚════════════════════════════════════╧═══════════════════════════╧═════════════════════════════╧══════════════════════════╝