Slow compile performance with Laravel Mix and npm run watch

[nckrtl]

Im trying to optimize the performance of npm watch. Currently each scss file change will take about 4400ms to be compiled. It only happens to style sheets, for example VueJS file changes are like 300ms.

I noticed that when I remove sourcemaps support in my webpack.mix.js file the compile times get slashed by a half, resulting in 2200ms on average. Although sourcemaps are beneficial I could live without them (my projects aren't that complex).

A bit more investigation lead me to my app.scss which looks like:

@tailwind base;

@import 'globals';

@tailwind components;

@tailwind utilities;

When I leave out the tailwind utilities my compile times for scss files are down to 300ms. Unfortunately I then lose everything tailwindcss is about; the utilities. So what I'm wondering:

Is 4000ms per compilation with npm run watch normal?
If not, what can I try to improve it?

Any help is welcome, Nick

This is my current webpack.mix.js:

const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
require('laravel-mix-purgecss');
require('laravel-mix-copy-watched');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.
 |
 */

mix.setPublicPath('./dist')
.browserSync('https://abc.test')
.webpackConfig({
  output: {publicPath: mix.config.resourceRoot},
});

mix.sass('resources/assets/styles/app.scss', 'styles')
   .purgeCss({
     whitelist: [require('purgecss-with-wordpress').whitelist, 'html'],
     whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
   })
   .options({
     processCssUrls: false,
     postCss: [require('tailwindcss')('./tailwind.config.js')],
   });

mix.js('resources/assets/scripts/app.js', 'scripts')
   .js('resources/assets/scripts/customizer.js', 'scripts')
   .blocks('resources/assets/scripts/editor.js', 'scripts')
   .extract();

mix.copyWatched('resources/assets/images/**', 'dist/images')
   .copyWatched('resources/assets/fonts/**', 'dist/fonts');

mix.autoload({
  jquery: ['$', 'window.jQuery'],
});

mix.sourceMaps(false, 'source-map');

if (mix.inProduction()) {
  mix.version();
}

This is what my package.json looks like:

{
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "scripts": {
    "build": "cross-env NODE_ENV=development run-s mix",
    "build:production": "cross-env NODE_ENV=production run-s clean mix",
    "start": "cross-env NODE_ENV=development run-s \"mix --watch\"",
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@tinypixelco/laravel-mix-wp-blocks": "^1.0.0",
    "@wordpress/babel-preset-default": "^4.10.0",
    "@wordpress/browserslist-config": "^2.6.0",
    "@wordpress/dependency-extraction-webpack-plugin": "^2.4.0",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.20.1",
    "laravel-mix": "^5.0.4",
    "laravel-mix-copy-watched": "^2.2.3",
    "laravel-mix-purgecss": "^5.0.0-rc.1",
    "npm-run-all": "^4.1",
    "purgecss-with-wordpress": "^2.1.0",
    "rimraf": "^3.0.2",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.2.1",
    "stylelint-config-standard": "^20.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "laravel-mix-tailwind": "^0.1.0",
    "popper.js": "^1.16.1",
    "postcss-import": "^12.0.1",
    "postcss-nesting": "^7.0.1",
    "tailwindcss": "^1.2.0",
    "vue": "^2.6.11",
    "vuex": "^3.1.3",
    "jam-icons": "^2.0"
  }
}

[jaxtheking]

I realised I'm having the same problem and I'm not even using the sass preprocessor.
The watch task takes 837ms if I remove the line @import "tailwindcss/utilities"; but with it it takes a whopping 24s.
I removed all other postcss plugins and it makes no difference.
I noticed that having a custom tailwind config added 6s to my build, but even with the default config the watch task runs for 17s.

@nckrtl Have you ever found a solution to this issue?
Any pointers would be highly appreciate it, I really don't get it.
Thanks,
Luca

[estevanmaito]

Is it possible for you to share a reproducible case?

I would be willing to debug it.

[jaxtheking]

Hi Estevan,
of course. I'll do my best to reduce the project down to the bear minimum - hopefully tonight.
Who knows, it might even help me to isolate the issue. To be fair, I haven't tried using a different environment (currently CentoOS 6 + Node 10 due to current server restrictions).
Thanks for your offer, you're a gent. I'll let you know when I have it.

[nckrtl]

@jaxtheking No I just assumed this was due to all the utility classes in @tailwind utilities import. I now rarely write custom css as I try to use the default classes as much as possible.

[jaxtheking]

@nckrtl I'm slightly confused... aren't the utility classes the 'default' classes? Outside of utilities, Tailwind CSS has no classes (apart from .container in components)...

[jaxtheking]

Hi @estevanmaito,
apologies for the delay. I deconstructed my setup and brought it back to bare bones. I removed any JS and custom CSS, so it's only compiling the Tailwind CSS classes. Yet the problem persists.
Even on my newer/faster local machine, the running times of the watch task seem excessive - however maybe you can tell me if those are the times to be expected from Tailwind CSS with webpack.

Watch task running times:
CentOS 6, Node 10.20.1

Basic: ~10s;
With custom tailwind config: ~14s;
With sourcemaps: ~20s;
With both: ~24s;

Windows 10, Node 12.13.1

Basic: ~6s;
With custom tailwind config: ~7.5s;
With sourcemaps: ~9.5s;
With both: ~12s;

If you're still willing to inspect/debug this, it can be downloaded here:
https://bitbucket.org/gpinoci/laravel-mix-tailwind-css-test

[jaxtheking]

Hi @estevanmaito, thanks for your time looking into this. I received your notification however it seems the comment has since been removed. I totally agree the culprit must be Laravel Mix - I did see those threads you mentioned however they seem stale and only relating to SASS/SCSS.
I'm using PostCSS instead... therefore the implementation of SASS in Laravel Mix should not affect the compiling speed of my project - right??
In any case I'll try rebuilding my setup without Laravel Mix.

[estevanmaito]

Yes, I continued inspecting after and realized my answer was somewhat misleading.

You're not using SASS. My project using Next.js also uses PostCSS and compiling times are very different: from ~19s in your project to ~5s in mine, using the same base Tailwind config.

I would say that in the in the end what differs is the way Laravel Mix implements Webpack setup, as a lot of issues about slowness in their project mention that moving to Gulp, Rollup and even custom Webpack setups usually solve the problem.

But I'm still curious with what is going on there.

[jaxtheking]

I'm just as curious now! As soon as I ship this stage out I may attempt to inspect the way Laravel Mix implements PostCSS and see if I manage to isolate the problem - if not I'll move away from it.
However, having a reproducible case already setup I might open an issue on their github page.

[estevanmaito]

There's a new version of Laravel Mix coming soon laravel-mix/laravel-mix@a3a680b

It looks like a lot of the core was refactored and we could see some performance improvements.

I tried installing it on your project, but the scripts don't seem to be compatible, and I didn't find any documentation on this new release (still alpha) 😕

[estevanmaito]

I got the alpha version ("laravel-mix": "6.0.0-alpha.1") running today and running watch is now 17s faster 🤯

DONE  Compiled successfully in 2264ms

It was taking 19s before with the same stupid test: just adding and removing

body {
  color: green;
}

This is the webpack.mix.js:

mix
  // needed to add this to run the alpha on my machine
  .setPublicPath('static')

  .postCss('pcss/main.pcss', 'css/', [
    require('postcss-import'),
    require('precss'),
    require('tailwindcss'),
    require('postcss-nested'),
  ])

  .options({
    processCssUrls: false,
  })

  .version()

// Source maps when not in production.
if (!mix.inProduction()) {
  mix.sourceMaps(false, 'source-map')
}

[terryupton]

I am also seeing this issue. I did a test of a barebones build and was still seeing build times around 5-6 seconds.
Initially I thought it was because I was building it using Sass and combining some of my SCSS files.
But I stripped it back to just Tailwind using PostCSS and recommended methods with Larval Mix.

tailwind.csss

@tailwind base;
@tailwind components;

@tailwind utilities;

Webpack.mix

const settings = require('./settings.json');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

// Set the public path to resolve any potential issues with version.
mix
    .setPublicPath(settings.paths.build.base)

    .options({
      processCssUrls: false,
    })
   
    .postCss(settings.paths.src.sass + 'tailwind.css', settings.paths.build.css, [
      require('tailwindcss'),
    ]);

This resulted in DONE Compiled successfully in 6235ms

[estevanmaito]

Have you tried this #1514 (reply in thread)?

[terryupton]

Not tired this. Not sure I’m comfortable using that with the lack of support for plugins etc (as in beta) on a production site.

Still having spoken with others. It seems these speeds are not typical and are slow. So hoping to figure out the cause of the problem.

[terryupton]

@estevanmaito do you know much about the new Laravel mix 6? Any eta on a production release or if there is any more information on it? I couldn’t see much on the mix git repo or official channels.

[estevanmaito]

I think it depends on the Webpack release cycle, as it depends on Webpack 5, which is still in beta: https://github.com/webpack/webpack/projects/5

I didn't do too much with Laravel Mix 6 apart from testing its compile time, so can't say if it is stable enough for production.

[torian257x]

sorry guys that I'm chiming in.
I'm having the same problem... laravel mix is very slow building tailwind (for me its ~8 seconds, all basic, no custom styles), which is annoying when you actually create a bunch of your own styles. So I for now just keep 2 different files, one for tailwind, one for my custom styles. I as well noticed, that

@tailwind base;

@tailwind components;

are both below 1 second, it's all in utilities where the time is lost

isn't there, maybe, a setup with multiple files, where we can get fast builds, but still can do all the tailwind juice? like the apply thing and stuff... at the end, one can just merge the files together if needed or god behold, serve 2 or 3 css files.

is there a best way for splitting the files?

[jaxtheking]

Hi @estevanmaito,
sorry it took me some time to get back to you - and thanks again for your help in looking into this.

Also to the benefit of others here that were struggling like me with unacceptable compiling times, I'm happy to report it can be solved by installing the laravel-mix-purgecss plugin. It would seem unrelated
but it must provide an alternative postCSS implementation along with the purgeCSS one (optional to enable).

My initial building time went from 41s down to 12s and my compiling times went from 24s to 8s on Linux (and 4.5s on Win10).
That's a win! You can see the changes in my test repo.

Last thing I'm still interested to test is if Laravel Mix v6 will fix this issue. If not, maybe this issue should be reported to them to be fixed ahead of shipping v6. Has anyone tried it?

[torian257x]

@jaxtheking it seems, seems to be true. Order yourself a pizza or something, treat yourself to something. That really will improve my life. <3

my build went from ~30s to ~10s

required were these parts - install purgecss (example here is untested) - be sure to check @jaxtheking link, he has the infos there

yarn add laravel-mix-purgecss --dev

example webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');


mix
    .purgeCss({
            enabled: true, //mix.inProduction(),
            content: [
                './resources/views/**/*.blade.php',
                './resources/js/**/*.js',
                './resources/js/**/*.jsx',
                './resources/js/**/*.tsx',
            ]
})
    .sass('resources/sass/tailwind.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [
            ,tailwindcss('tailwind.config.js') ],
    });

I wonder though how useful this is for dev? as when one adds new tailwind classes, are they built as well?

[torian257x]

for dev this feels useless. I was using "yarn hot" and yarn watch btw. As soon as you add a new class that wasnt used before, it still gets purged (somehow that seems to have been cashed)

honestly, with those slow build times, DX feels kinda bad... have to rebuild the entire thing each time a new apply gets added? when something gets purged as well, rebuild via command line? meh.

[ockam]

@jossnaz Running Purge in dev is adding unnecessary overhead. As suggested above, splitting files makes a huge improvement.

I use styles.css with the usual Tailwind import EXCEPT tailwindcss/utilities which I place in a separate file, then with Laravel Mix I process both file and combine them together.

  .postCss(`src/css/styles.css`, `../../build/css/`)
  .postCss(`src/css/tailwind-utilities.css`, `../../build/css/`)
  .postCssConfig()

  .combine(
    [`build/css/styles.css`, `build/css/tailwind-utilities.css`],
    `web/assets/css/styles.css`

Here, I’m using Postcss, but it should work with SASS as well.

My guess is that since tailwind-utilities.css never change, Webpack use a cache and process the whole thing much faster.

Note that all 3 CSS files (the two build files and the combined file) will be added to mix-manifest.json.

[adddz]

Thanks @ockam I was able to go from ~6s compile time to ~1s

Shouldn't this be the default, @adamwathan? I think it's something all Laravel developers face and that's a huge difference.

[nckrtl]

I think this is the best approach as well. Would love to get an opinion from @bradlc or @adamwathan indeed.

[torian257x]

@adddz how are you guys seeing like 6s? I'm getting ~24s and if I split the files, I get ~16s but 8s difference isn't that much really if the entire build takes 30s (assuming I have some react to build as well in the real build).

I am using some plugins though but not many, custom forms and tailwindcss-empty-pseudo-class

is that postCss vs sass? maybe someone can create a repo where I can look whats going on?

[torian257x]

btw for me combine didn't seem to work. This worked though, notice the weird way I have to define paths, once with ../build when using .sass and once with build in .style

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
let atImport = require('postcss-import');

mix
    .sass('resources/sass/tailwind.scss', '../build/css')
    .sass('resources/sass/tailwind_utilities.scss', '../build/css')
    .options({
        processCssUrls: false,
        postCss: [
            atImport(),tailwindcss('tailwind.config.js') ],
    })
    .styles(
        [`build/css/tailwind.css`, `build/css/tailwind_utilities.css`],
        `public/css/tailwind_combined.css`);

[adddz]

This is what I have:

mix
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/tailwind-utilities.scss', 'public/css')
    .combine(
        [`public/css/app.css`, `public/css/tailwind-utilities.css`],
        `public/css/app-build.css`
    )

[torian257x]

actually disabling tailwindcss can lead to a problem in the mix file, e.g. it gets removed as well.

an alternative would be to build it separately
https://stackoverflow.com/questions/62288513/is-there-a-way-to-watch-two-laravel-mix-webpack-config-files-at-the-same-time-fo/62971539#62971539

[torian257x]

I created this gist with what seems to be working, mix of hot (js) and watch (for tailwind)
https://gist.github.com/Jossnaz/7cf182e794e515d068159ad71fcf7855

full discussion here:
laravel-mix/laravel-mix#1914

[GENL]

Is there a way to disable mix css asset compilation on hot reload? The fact is we can compile tailwind css only once and the it almost never change during the app development. And if it changes, we just we just run yarn dev to compile css again.

[florianbouvot]

@nckrtl it may interest you: https://nystudio107.com/blog/speeding-up-tailwind-css-builds

[nckrtl]

Thx for linking that resource. Definitely worth to apply a solution like that.

[adddz]

This solution doesn't work anymore because Tailwind cannot find classes when using @apply, it says it's because they are not in the same file tree. To make it work I have to put the @tailwind utilities line back in the main file, slowing down everything again.

Any ideas?

[adddz]

Indeed I rolled back to a previous Tailwind version (not using the 2). I'd still want to use the 2, do you expect Laravel Mix 6 will fix this?

[adddz]

I'm still surprised by how this is not a very popular issue between Tailwind/Mix users. 8 seconds local building time at every reload is really annoying.

[torian257x]

Indeed I rolled back to a previous Tailwind version (not using the 2). I'd still want to use the 2, do you expect Laravel Mix 6 will fix this?

yes mix 6 should solve it. A lot of things are faster... mix 6 will solve many things as it uses webpack 5

it is a popular issue actually... but people just focused on the future instead of repairing old clunky trash I guess

[torian257x]

and careful, tailwind 2 dropped support for IE11... dont get too excited about numbers, read the changelog

[BeKnowDo]

Frankly, I think this is why we should be able to write our own webpack or npm scripts

[nckrtl]

Alright, this issue just got solved for good: https://www.youtube.com/watch?v=3O_3X7InOw8 hold on to your freaking hats because mine just got blown away completely 🤯.

[flozero]

Hello can you tell us what you did to make it works we are experiencing the same issue ^^

[nckrtl]

Not sure how I can explain it more clearly as I did in my last comment. Did you check for any @apply occurrences in a nested @screen directive?

[codeBasePlusPlus]

npm install -D @tailwindcss/jit tailwindcss postcss

const mix = require("laravel-mix");

mix.postCss("resources/css/app.css", "public/css").options({
  postCss: [
    require("@tailwindcss/jit"),
  ],
});

npm run watch

✔ Compiled Successfully in 112ms
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                                                      File │ Size     │
├───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                                                /js/app.js │ 933 KiB  │
│                                                                                                                                               css/app.css │ 14.5 KiB

was 12 megs and took 20 seconds each time.
i love u video linker person.

[joe-allen]

Thanks @codeBasePlusPlus, something similar to what you have above (and exactly what @theMosaad mention on March 31st here https://discourse.roots.io/t/tailwindcss-jit-integration-with-sage-10/20466) helped me...

npm i -D @tailwindcss/jit

Then in webpack.mix.js...

remove:
[require('tailwindcss')],
add:
[require('@tailwindcss/jit')],

[daerentis]

You could also just add Just-In-Time Mode by editing the tailwind.config.js and adding mode: "jit".
https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode

[amiut]

Putting tailwind imports in a separate file worked for me , compile time went from 18s to 300ms

[acrolink]

Putting tailwind imports in a separate file worked for me , compile time went from 18s to 300ms

What do you mean by that? Can you kindly provide an example?

[amiut]

Well its a pretty old comment, but it was like putting tailwind related stuff in a file like "tailwind.css":

// styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

And import this file in your app styles

// styles/globals.css
@import "tailwind.css"

// ... rest of your styles

[23zane]

Hi, I was stuck with slow performance too, working on a big project, compiling time was about 7/8 seconds per component, I've disabled many of the variants that I don't use (almost all of them, since I use @apply + media query all the time) and now compiling time is back to 1 second :)