schoero / eslint-plugin-readable-tailwind

ESLint plugin to automatically break up long tailwind class strings into multiple lines for better readability.
MIT License
63 stars 3 forks source link

Speed issue #14

Closed The-Code-Monkey closed 3 months ago

The-Code-Monkey commented 3 months ago

Hey, just want to start off by saying the project is really really helpful my only issue i have with it, is even on my really simple so far project it is seeming quite slow.

Rule Time (ms) Relative
readable-tailwind/sort-classes 1801.760 29.5%
import/no-cycle 1007.964 16.5%
import/namespace 617.118 10.1%
prettier/prettier 308.961 5.1%
@typescript-eslint/no-unsafe-assignment 304.347 5.0%
import/no-unused-modules 224.190 3.7%
etc/no-deprecated 187.286 3.1%
no-explicit-type-exports/no-explicit-type-exports 150.270 2.5%
react/no-unstable-nested-components 109.945 1.8%
react/destructuring-assignment 95.081 1.6%

the data above shows that it takes nearly 2 seconds to run the lint is there anything you can do to speed this up?

schoero commented 3 months ago

The sort-classes rule relies on the tailwind config to get the official sorting order. Loading the tailwind config and creating the necessary tailwind context was taking a lot of time.

I could reduce the time a lot by caching the tailwind config and the resulting context.

These are the results of a larger repository of mine with caching disabled and enabled:

Before:

Rule Time (ms) Relative
readable-tailwind/sort-classes 3724.869 39.7%

After:

Rule Time (ms) Relative
readable-tailwind/sort-classes 123.765 3.2%

I like to test the new version across different repositories to make sure this doesn't break anything. I have published a beta version with the new caching mechanism. You can install it using

npm i eslint-plugin-readable-tailwind@beta

I'd be happy to get your feedback as well before merging.

The-Code-Monkey commented 3 months ago

@schoero thank you for sorting this so quickly here are my updated results

Rule Time (ms) Relative
import/namespace 1087.743 23.7%
import/no-unused-modules 570.014 12.4%
prettier/prettier 345.693 7.5%
@typescript-eslint/no-unsafe-assignment 334.515 7.3%
etc/no-deprecated 201.366 4.4%
readable-tailwind/sort-classes 184.481 4.0%
no-explicit-type-exports/no-explicit-type-exports 149.424 3.3%
react/no-unstable-nested-components 116.231 2.5%
react/jsx-fragments 105.252 2.3%
react/no-array-index-key 101.895 2.2%

this is a massive improvement thank you.