webpack-encore: [Performances] Slow builds

@pcarballeda Were the 50 seconds also with Encore and using the same command (the optimizations are not the same between environments)? If that’s the case then the extra 50s are probably related to the content of those 6 files. You could maybe pinpoint what’s causing your issue by adding/removing things (either from the entry list or from the files themselves)?

@L3tum By “131 files”, do you mean entrypoints? In both cases, are you importing things in them? Don’t forget that Webpack has to process those imports as well.

That being said, having a build time of X minutes is definitely not normal. Documenting how to improve that is a bit hard because the issue will probably not be the same between two projects… but here are some things you could try:

• Run Webpack with the --profile option, you should be able to see a lot of metrics and maybe something will stand out
• Try disabling source maps… if it reduces your build time drastically, maybe you could try another source-map type
• If you are using SASS/SCSS the resolveUrlLoader option is known for slowing down some builds. It is enabled by default since imports in CSS files feel more natural this way (it makes the paths relative to the file you are editing), but you can disable it by using the second parameter of Encore.enableSassLoader()
• If you are using TypeScript you could try calling Encore.enableForkedTypeScriptTypesChecking() to make the type-checking part of the build faster
• If the external libraries you are using allow it, only import the things you need (for instance import { Observable, Subject } from 'rxjs' instead of import * as rx from 'rxjs').
• More generally, keep in mind that importing hundreds of files into a single entrypoint is not the same than having hundreds of entrypoints since each entrypoint will have its own dependency graph that’ll need to be computed, transformed and eventually compared to other graphs (to extract common code)… So if you can and that’s not already the case, avoid having multiple entries for a single page, create an unique file and import everything your page needs in it.
• If you can, try compiling on another computer… builds can be resource-intensive and it could be an hardware/software issue (for instance if your source files are stored on a network drive).
• Try updating your build-related dependencies (Encore itself, loaders, plugins, etc.)

I don’t think Compiled successfully in 214ms is too slow.

By the way, don’t hesitate to use words and sentences the next time you want to communicate with humans.

Merry Xmas!! 🎉

I have a website with 114 entries and with my curent webpack configurarion, dev-server expenses about 50 seconds to compile all this assets. But with symfony encore I’ve just added 6 entries and expense about 100 seconds. So, definitely it’s to slow and documentation is really poor.

@slince Does it also do it when you specify the full scheme? For instance:

.bottom-banner {
   // (...)
   background: url(https://pucenter.dataoke.com/images/pro_index_bot_bg.jpg?t=201811301045);
}

I suspect this is related to the resolve-url-loader that tries to resolve things like that. They fixed something similar a while ago (https://github.com/bholloway/resolve-url-loader/pull/68) but it only works if you specify the protocol.

In fact, this shouldn’t take too much time to download this image; the network speed is fast enough.

It doesn’t really matter since nothing should be downloaded in this case anyway.

For minimizing JS, yes