Extremely slow compile times ~28882ms

[andrew-ireland]

Hi there, I'm suffering with really slow compile times when running npm watch script. Hopefully someone wiser than me can advise if I'm doing something wrong (I can't figure out what I've missed 😕).

I'm running laravel-mix v5.04, node v11.15.0, & npm v6.14.4.
Here is my webpack.mix.js file && package.json for reference:

const mix          = require('laravel-mix');
const tailwindcss  = require('tailwindcss');
require('laravel-mix-purgecss');
mix.sass('sass/app.scss', 'css/app.css')
  .options({
    processCssUrls: false,
    postCss: [
      require('autoprefixer'),
      tailwindcss('./tailwind.js') 
    ],
  })
  .purgeCss({
    enabled: mix.inProduction(),
    globs: [
      path.join("**/*.html"),
      path.join("js/**/*.js"),
    ],
    folders: ['src', 'templates'],
    extensions: ['html', 'js'],
  })
  .setPublicPath('/')
  .browserSync({
    proxy: 'website-address.test',
    // https: true,
    files: [
        'css/**/*.css',
        'js/**/*.js',
        '**/*.html'
    ],
    browser: "google chrome"
  })

mix.js([
   'js/src/vendor.js'
], 'js/vendor.js')

mix.js([
   'js/src/app.js'
], 'js/app.js')


if (mix.inProduction()) {
    mix.options({
        terser: {
            terserOptions: {
                compress: {
                   drop_console: true
                },
                output: {
                  comments: false,
                }
            }
        }
    });

    mix.version();
}

{
  "name": "Univers",
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "export-tailwind-config": "tailwindcss-export-config --config=/tailwind.js --destination=sass/base/tailwind-configs --format=scss --flat=true"
  },
  "author": "Studio Andrew Ireland",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "2.2.2",
    "cross-env": "^7.0.2",
    "imports-loader": "^0.8.0",
    "laravel-mix": "^5.0.4",
    "laravel-mix-alias": "^1.0.2",
    "laravel-mix-purgecss": "^4.1",
    "purgecss-webpack-plugin": "^2.1.2",
    "sass": "^1.26.3",
    "sass-loader": "8.*",
    "tailwindcss": "^1.3.4",
    "tailwindcss-accessibility": "^1.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "@swup/body-class-plugin": "^1.0.2",
    "@swup/debug-plugin": "^1.0.3",
    "@swup/ga-plugin": "^1.0.1",
    "@swup/gtm-plugin": "^1.0.2",
    "@swup/js-plugin": "^1.0.4",
    "@swup/preload-plugin": "^1.0.3",
    "@swup/scroll-plugin": "^1.0.6",
    "balance-text": "^3.3.0",
    "flickity": "^2.2.1",
    "flickity-imagesloaded": "^2.0.0",
    "gsap": "^3.2.6",
    "imagesloaded": "^4.1.4",
    "overlayscrollbars": "^1.12.0",
    "scroll-lock": "^2.1.4",
    "smoothscroll-polyfill": "^0.4.4",
    "swup": "^2.0.9",
    "vanilla-lazyload": "^15.1.1"
  }
}

[Reached]

Is it also slow when recompiling the code? On the first compile it will be slow, but for recompiling it should be super fast when running npm run watch :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[selim13]

I also experience compile time problems.
Most of the time it is busy compiling sass code and stuck with sass-loader. For my project initial compiling can take up to 20s and recompiling up to 10s.

Apparently this is a common problem with sass+webpack:
https://stackoverflow.com/questions/56262137/slow-sass-loader-build-times-with-webpack
webpack-contrib/sass-loader#296

[torian257x]

this kinda helped me:
https://gist.github.com/Jossnaz/7cf182e794e515d068159ad71fcf7855

I use yarn hot to build
tailwind is set to watch. And incremental watch builds seem to work
initial build time is still almost 30s or so. BUT: the tailwind build runs in a separate process, thus you are free to go coding right away.

[trideout]

I'm having extremely slow build times with 100+ sass files. If I break up the build with yargs and only process 20 or so at a time, my build executes within a few minutes, but when I run all sass files at once it can take over 30 minutes to compile. It appears that each sass file added to the chain adds an exponential increase in compile time.
Node: v14.12.0
Npm: 6.14.8
MIx: 5.05
sass-loader: 8.0.2

[Ahrengot]

I answered this question in another issue a few hours ago. I get a 26 second initial compile time (There's not really any way around this given the 20k lines of tailwind utilities) but my subsequent builds all take around 150ms.

Here's my setup: #2470 (comment)

[JeffreyWay]

Hey, everyone. I'm not sure if this is related to a Mix bug or not. I use Tailwind, too, but have never suffered from 30 second watch recompiles.

It could be related to many things. If someone can send me a set of steps to follow, I can look into it further.

[Mazeland]

I also seem to have an issue with extreme long compilation times with Laravel-Mix 5.0.4. When I downgrade to 4.1.4, the problem is gone. I don't use Tailwind.

node v10.18.1
npm 6.14.6
sass-loader 7.3.1
node-sass 4.14.1
laravel-mix 5.0.5

Any update on this issue?

[torian257x]

Any update on this issue?

I think laravel mix 6 is the way to go. At least, once plugins started fixing their build issues (new File becomes unavailable)

[mdrego]

The command hung for minutes, and when I did a Ctrl+C it kicked into action.
May be worth a try!