Good day to all. I started using laravel.mix for projects, but I ran into a compilation wall in over 10 seconds> <

How to make laravel.mix compile my sources for at least a second?

my webpack.mix.js:

let mix = require('laravel-mix'); mix.autoload({ jquery: ['$', 'window.jQuery'] }); mix.setPublicPath('./') .sass('src/scss/main.scss', 'dist/css') .sourceMaps() .js('src/js/main.js', 'dist/js') .extract(['bootstrap', 'popper.js', 'jquery' ]); mix.browserSync({ proxy: 'laravel.mix.li-lit' });

My package.json:

 { "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": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "browserslist": [ "> 1%", "last 3 version" ], "devDependencies": { "browser-sync": "^2.26.3", "browser-sync-webpack-plugin": "^2.2.2", "cross-env": "^5.2.0", "css-mqpacker": "^7.0.0", "cssnano": "^4.1.8", "laravel-mix": "^4.0.14", "resolve-url-loader": "^2.3.1", "sass": "^1.16.1", "sass-loader": "^7.1.0", "vue-template-compiler": "^2.5.22" }, "dependencies": { "bootstrap": "^4.2.1", "inputmask": "^4.0.6", "jquery": "^3.3.1", "popper.js": "^1.14.6", "swiper": "^4.4.6", "wowjs": "^1.1.3" } }

This is what my webpack says when the scss compilation begins (just replaced the background and deleted it): enter image description here

But what he says when he compiled the changes: enter image description here

    1 answer 1

    There are a couple of moments.

    1. The structure and power of the processor (ideally, Intel i5 and higher, preferably stationary, because the cache is larger than in the mobile process)
    2. Difficulty SASS. If you have a lot of cycles, miscalculations with variables
    3. sourceMaps lengthens the rebild very much, especially on scripts (I would recommend disabling it)
    4. Synchronization can also add half a second - second
    5. The first watch is done longer than later.

    But first of all - the processor.

    Was it always like this or specifically on some project? If always - 100% percent, if the project - see the scripts and turn off the mapping

    i5 stationary, 8 gigs of RAM, Win7

    Prod

    __

    Prod with voim and a bunch of script (65 seconds)

    enter image description here

    first 22s, next 1.5s

    • Now I'm sitting on a macbook air i5 4gb RAM, 1 - 3 seconds spent on compilation. I used to sit on samsung with amd a10 8gb RAM and here it is all concrete for a long time, I also lean towards the processor. - Aleksandr Krais