Yarn encore dev takes very long to build when adding JS files to webpack.

[allartdo]

I have asked this question here already too, but no answer. I waited quite some time but no answer. I hope you guys can help me.

In short: CSS and app.js works just fine. Any custom JS file I add through .addEntry() make encore build take about 100s. But only most of the time. Sometimes it just builds fine.

If you have read the question in above link, I would like to add:
This command is being asked to execute when running yarn encore: npx browserslist@latest --update-db
When im running it, the next time I run encore it just asks me to run it again. So it does not seem to do anything. When I run the command it also says "No target browser changes". And warning "@symfony/webpack-encore > friendly-errors-webpack-plugin@2.0.0-beta.2" has incorrect peer dependency "webpack@^4.0.0". And warning " > file-loader@6.0.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". I dont know if this has something to do with the issue.

My issues seem fundemantally different from #476. It has not helped me.

This is yarn encore dev --profile when it's fast:

yarn encore dev --profile
yarn run v1.22.19
$ Path\Urenregistratie\node_modules\.bin\encore dev --profile
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Running webpack ...

 DONE  Compiled successfully in 1254ms                                                                                                                                                            10:08:56
 I  24 files written to public\build
assets by info 2.79 MiB [immutable]
  assets by path fonts/ 1.07 MiB 12 assets
  assets by path images/*.svg 1.73 MiB 3 assets
assets by path *.js 566 KiB
  assets by chunk 511 KiB (id hint: vendors) 2 assets
  asset app.js 26.9 KiB [emitted] (name: app)
  asset runtime.js 14.4 KiB [emitted] (name: runtime)
  asset navbar_js.js 13.7 KiB [emitted] (name: navbar_js)
assets by path *.css 203 KiB
  asset vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-e51da4.css 176 KiB [emitted] (id hint: vendors)
  asset app.css 26.9 KiB [emitted] (name: app)
asset images/favicon.b91954d2.png 2.43 KiB [emitted] (auxiliary name: _tmp_copy)
asset manifest.json 2.07 KiB [compared for emit]
Entrypoint app [big] 755 KiB (2.79 MiB) = 6 assets 15 auxiliary assets
Entrypoint navbar_js 132 KiB = runtime.js 14.4 KiB vendors-node_modules_core-js_internals_add-to-unscopables_js-node_modules_core-js_internals_e-78190e.js 104 KiB navbar_js.js 13.7 KiB
Entrypoint _tmp_copy 14.4 KiB (2.43 KiB) = runtime.js 1 auxiliary asset
runtime modules 3.42 KiB 8 modules
modules by path ./node_modules/core-js/ 72.7 KiB
  modules by path ./node_modules/core-js/internals/*.js 47.7 KiB 81 modules
  modules by path ./node_modules/core-js/modules/*.js 24.9 KiB 14 modules
modules by path ./node_modules/@stimulus/ 84.5 KiB 39 modules
modules by path ./assets/ 6.91 KiB (javascript) 8.54 KiB (css/mini-extract) 8 modules
modules by path ./node_modules/@fortawesome/fontawesome-free/css/*.css 50 bytes (javascript) 58.1 KiB (css/mini-extract)
  ./node_modules/@fortawesome/fontawesome-free/css/all.min.css 50 bytes [built] [code generated]
    294 ms ->
    365 ms (resolving: 37 ms, restoring: 0 ms, integration: 0 ms, building: 328 ms, storing: 0 ms)
  css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./node_modules/@fortawesome/fontawesome-free/css/all.min.css 58.1 KiB [code generated]
    294 ms -> 365 ms ->
    0 ms (resolving: 0 ms, restoring: 0 ms, integration: 0 ms, building: 0 ms, storing: 0 ms)
modules by path ./node_modules/stimulus/*.js 73 bytes
  ./node_modules/stimulus/index.js 31 bytes [built] [code generated]
    294 ms -> 60 ms -> 186 ms -> 96 ms ->
    79 ms (resolving: 72 ms, restoring: 0 ms, integration: 0 ms, building: 7 ms, storing: 0 ms, additional resolving: 114 ms)
  ./node_modules/stimulus/webpack-helpers.js 42 bytes [built] [code generated]
    294 ms -> 60 ms -> 241 ms ->
    116 ms (resolving: 97 ms, restoring: 0 ms, integration: 0 ms, building: 19 ms, storing: 0 ms)
4 modules
webpack 5.31.2 compiled successfully in 1254 ms
Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: Path\Urenregistratie\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -pipeName \\.\pipe\notifierPipe-4f82db39-82a1-449c-816e-6164f5528f17 -p Path\Urenregistratie\node_modules\webpack-notifier\logo.png -m "Build successful" -t "Webpack Encore"
Done in 2.79s.

This one, a view seconds later, runs slow:

yarn encore dev --profile
yarn run v1.22.19
$ Path\Urenregistratie\node_modules\.bin\encore dev --profile
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Running webpack ...

 DONE  Compiled successfully in 111031ms                                                                                                                                                          10:10:51
 I  24 files written to public\build
assets by info 2.79 MiB [immutable]
  assets by path fonts/ 1.07 MiB 12 assets
  assets by path images/*.svg 1.73 MiB 3 assets
assets by path *.js 566 KiB
  assets by chunk 511 KiB (id hint: vendors) 2 assets
  asset app.js 26.9 KiB [emitted] (name: app)
  asset runtime.js 14.4 KiB [emitted] (name: runtime)
  asset navbar_js.js 13.7 KiB [emitted] (name: navbar_js)
assets by path *.css 203 KiB
  asset vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-e51da4.css 176 KiB [emitted] (id hint: vendors)
  asset app.css 26.9 KiB [emitted] (name: app)
asset images/favicon.b91954d2.png 2.43 KiB [emitted] (auxiliary name: _tmp_copy)
asset manifest.json 2.07 KiB [compared for emit]
Entrypoint app [big] 755 KiB (2.79 MiB) = 6 assets 15 auxiliary assets
Entrypoint navbar_js 132 KiB = runtime.js 14.4 KiB vendors-node_modules_core-js_internals_add-to-unscopables_js-node_modules_core-js_internals_e-78190e.js 104 KiB navbar_js.js 13.7 KiB
Entrypoint _tmp_copy 14.4 KiB (2.43 KiB) = runtime.js 1 auxiliary asset
runtime modules 3.42 KiB 8 modules
modules by path ./node_modules/core-js/ 72.7 KiB
  modules by path ./node_modules/core-js/internals/*.js 47.7 KiB 81 modules
  modules by path ./node_modules/core-js/modules/*.js 24.9 KiB 14 modules
modules by path ./node_modules/@stimulus/ 84.5 KiB 39 modules
modules by path ./assets/ 6.91 KiB (javascript) 8.54 KiB (css/mini-extract) 8 modules
modules by path ./node_modules/@fortawesome/fontawesome-free/css/*.css 50 bytes (javascript) 58.1 KiB (css/mini-extract)
  ./node_modules/@fortawesome/fontawesome-free/css/all.min.css 50 bytes [built] [code generated]
    499 ms ->
    618 ms (resolving: 70 ms, restoring: 0 ms, integration: 0 ms, building: 548 ms, storing: 0 ms)
  css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./node_modules/@fortawesome/fontawesome-free/css/all.min.css 58.1 KiB [code generated]
    499 ms -> 618 ms ->
    0 ms (resolving: 0 ms, restoring: 0 ms, integration: 0 ms, building: 0 ms, storing: 0 ms)
modules by path ./node_modules/stimulus/*.js 73 bytes
  ./node_modules/stimulus/index.js 31 bytes [built] [code generated]
    499 ms -> 108 ms -> 438 ms -> 150 ms ->
    105 ms (resolving: 96 ms, restoring: 0 ms, integration: 0 ms, building: 9 ms, storing: 0 ms, additional resolving: 155 ms)
  ./node_modules/stimulus/webpack-helpers.js 42 bytes [built] [code generated]
    499 ms -> 108 ms -> 529 ms ->
    156 ms (resolving: 139 ms, restoring: 0 ms, integration: 0 ms, building: 17 ms, storing: 0 ms)
4 modules
webpack 5.31.2 compiled successfully in 111031 ms
Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: Path\Urenregistratie\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -pipeName \\.\pipe\notifierPipe-ef2e4a6b-58e5-4136-be1f-5301623ac7f8 -p Path\Urenregistratie\node_modules\webpack-notifier\logo.png -m "Build successful" -t "Webpack Encore"
Done in 113.47s.

[weaverryan]

Hi!

I'm not sure - we're calling webpack behind the scenes, and these performance issues are very hard to debug. This, indeed, looks odd.

has incorrect peer dependency "webpack@^4.0.0"

This is nothing to worry about.

Sorry I can't offer better assistance :/