Laravel Mix Extremly Slow

Can you show your mix.js file?

mix.js('resources/js/app.js', 'public/js')
    .extract(['@fortawesome/fontawesome-free'])
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/img', 'public/img')
    .options({
        processCssUrls: false
    })
    .browserSync('http://127.0.0.1:8000');

Do you compile using npm run dev or npm run watch?

"Dev" is significantly slower than watch in the long run. The first compilation process of watch is as slow, but every following iteration should be much much faster

Check out this article: https://mike-griffiths.co.uk/blog/laravel-mix-watch-running-really-slow-or-high-cpu-usage-heres-a-probable/

In essence, don't watch the node modules

    watchOptions: {
        ignored: /node_modules/
    }
});

// If you're running vanilla Webpack when you'll need to go with something along the lines of:

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/
  }
};`

@adrianwix Yeah, something odd is going on there. When using npm run watch on the Laracasts codebase, everything recompiles within a second or two. Can you, one by one, comment out each call in your webpack.mix.js file to pinpoint where the hangup is?

Like that?

mix.js('resources/js/app.js', 'public/js')
    .extract(['@fortawesome/fontawesome-free'])
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/img', 'public/img')
    .options({
        processCssUrls: false
    })
    .browserSync('http://127.0.0.1:8000')
        .options({
            watchOptions: {
                ignored: /node_modules/
            }
        });

I am running npm run watch

 WAIT  Compiling...                                                                                                                   7:14:49 PM


 40% building 0/1 modules 1 active ...masalud-laravel\resources\sass\app.scss

 DONE  Compiled successfully in 44673ms                                                                                               7:15:34 PM


       Asset     Size   Chunks             Chunk Names
/css/app.css  130 KiB  /js/app  [emitted]  /js/app
 + 3 hidden assets
[Browsersync] File event [change] : public\css\app.css

My sass files are

sass
|- imports
|---- home.scss
|- app.scss
|- my-components
|- my-theme.scss

I am working with material design web. The app.scss file look like.

// Import global Material Theming variables
@import "my-theme";

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

@import "~@material/icon-button/mdc-icon-button";
@import "~@material/top-app-bar/mdc-top-app-bar";
@import "~@material/typography/mdc-typography";
@import "~@material/drawer/mdc-drawer";
@import "~@material/list/mdc-list";
@import "~@material/layout-grid/mdc-layout-grid";

@import "my-components";

@import "imports/home";

* {
  box-sizing: border-box;
}

.full-device-height {
  //Layout padding 24px * 2 and Navbar height 64px
  height: calc(100vh - 48px - 64px);
}

For example in home.scss changing the background color takes 30-40s to compile (Using Watch)

// home.scss

.home-welcome-background {
  background-color: #540aff;
}

I want to revive this topic... @jeffreyway

The more scss you have to process the slower node-sass becomes. You're importing all of fort awesome but it's the .scss, not the compiled and minified version. You probably don't need sass to process this during development.

In fact, perhaps only use SASS to compile what's unique and not a library in your project in development.. compile it all for your production builds.. and do things like critical CSS in your production step.