CODEWITHSUNDEEP
typescriptwebpackwebpack-dev-server
jayarjo
jayarjo

Reputation: 16716

webpack-dev-server takes forever to load the bundle

webpack-dev-server takes approximately a minute to reload the web app. bundle.js is 4mb or so - I know that's big, but it's loaded from local server, shouldn't take that long? Also that's not the time for recompilation. It's just reload. So even if nothing is changed and I simply trigger refresh in the browser, a minute is how long it will take to load the bundle.

enter image description here

What could be reason for this? Or it's just how it usually operates? How does one even troubleshoot something like this in webpack-dev-server? I would like to locate the bottleneck.

Upvotes: 7

Views: 2807

Answers (1)

jayarjo
jayarjo

Reputation: 16716

First of all to answer the actual question - yes - that's how long it takes to load file of that size over HTTP. And there's nothing we can do about it. If anyone has any idea how to accelerate the actual loading procedure (without caching), let me know in the comments.

TL;DR

The only solution to this that I'm aware of at the moment is caching. But you need to make sure that you cache the right stuff.

Random stuff that might turn out to be a solution

I personally had two omissions in my setup. Trivial, but absolutely crucial to check/fix.

Note: The following only makes sense, if you code-split - third party libs that do not change should be loaded separately from files you are working on (more on that below).

  1. I had caching disabled for open devtools. I don't remember why I enabled that feature to begin with and totally forgot that I did. So turns out to be a very bad idea. Make sure you do not have one enabled (make sure that that checkbox is unchecked!). enter image description here

  2. Another big problem is that VSCode that I use and specifically Chrome Debugger plugin for VSCode disabled caching by default. So web-app in debug mode started to load slowly out of nowhere. Good news is that there's an option to turn it back: disableNetworkCache (true by default)

Even if you cache, if your bundle is big, eventually cache will invalidate and you will have to wait while fresh version loads, unless you make use of code splitting to split that bundle into several independent pieces, that will invalidate at different times and even if they will, they will load much faster than one big dump.

Advices from personal experience

First of all if you for some reason are stuck on the legacy CRA you need to upgrade, basically every other month you spend not doing so, is complicating upgrade procedure that is imminent anyway, unless you are not planning to work on that project ever again.

If your project already reached the stage when upgrade simply is not feasible, because updated modules and plugins come with new requirements that might not be compatible with files in your project, you will have to eject. It might sound crazy but it might end up being less pain then trying doing it without it.

Upvotes: 2

Related Questions