Attempting to speed up Tailwind builds

[coreymcollins]

DESCRIPTION

Poking around at our wd_s build process a bit (after #568 was posted), I wanted to see if we could speed things up when running npm run start.

Current Speeds

I set a few benchmarks to start on a fresh pull of the repo:

npm run build

Time To Run: 11677ms

npm run start (start)

Time To Run: 11436ms

This is how long it takes for npm run start to start and complete the initial build.

npm run start (change)

Time To Run: 6315ms

This is how long it takes for a build to complete after making a change to a Sass file while npm run start is running.

Updated Speeds

Looking around for solutions to the long times it takes Tailwind to compile, and it doesn't seem like a rare issue. There are a lot of posts about how long it takes to compile:

• Slow compile when using @apply tailwindlabs/tailwindcss#443
• https://nystudio107.com/blog/speeding-up-tailwind-css-builds
• Tailwind 2.0 poor performance as part of a webpack PostCSS build system tailwindlabs/tailwindcss#2820
• https://adamwathan.me/journal/2019/01/11/new-website-and-tailwind-performance-hell/

One of the solutions people suggested was splitting the Tailwind imports and our theme imports into separate files.

So, what I did was created a new tailwind.scss file which handles all of the @tailwind import rules separate from our theme index.scss file which handles our partial @import rules.

The results are below.

npm run build

Time To Run: 16677ms

5 seconds longer! That's not great, but also consider that we don't necessarily need to run npm run build actively as part of our daily process. When we first check out a project or when we deploy changes, npm run build will run but it isn't something that actively hampers our active workflow.

Still, not a great sign.

npm run start (start)

Time To Run: 15656ms

This is how long it takes for npm run start to start and complete the initial build. This is also longer by about 4 seconds!

Again, this is the initial run of npm run start so not a thing that slows our active workflow down but, again, not a great sign.

npm run start (change)

Time To Run: 2498ms

This is how long it takes for a build to complete after making a change to a Sass file while npm run start is running.

Almost 4 seconds faster! This is the big one, because this is what will run when we're actively working on a project and this seems to save up to 4 seconds. Your mileage may vary there – sometimes it bounces around to 2600ms or so, but I haven't had it hit 3000ms at all.

SUMMARY

We get faster speeds while actively running npm run start with these changes, but everything else seems to be slower (build, and how long npm run start takes to start).

The speed for saving JS files remains unchanged, routinely coming in below 100ms.

This isn't me making a decision to merge this in as gospel, but as a way to raise it as something for everyone to check out and test to see if you find the same results and if the negatives outweigh the positives enough to implement such a thing.

Ideally, we'd be able to find a smoother way to make everything faster but Tailwind really does a number on speed here.

OTHER

• Is this issue accessible? (Section 508/WCAG 2.0AA)
• Does this issue pass all the linting? (PHPCS, ESLint, SassLint)
• Does this pass CBT?

STEPS TO VERIFY

1. Check it out
2. Run npm run build
3. Run npm run start
4. Make a change to a Sass file
5. Make a change to a JS file

DOCUMENTATION

Will this pull request require updating the wd_s wiki?

I doubt it? Maybe. If we have anything that references specific files, we may need to tweak that but overall the dev workflow doesn't change at all.

[gregrickaby]

For Next.js projects we've had to do the same thing.

index.css is only for importing the default Tailwind directives.

Everything custom goes into global.css