Webpack generates many chunk js for each component and loads them at the same time. Fine?

Question

webpack

I noticed that webpack generates its own js file for each vue component. This is how it should be, I thought. But I saw the catch in that they are all loaded at once when the page loads.

<link href=/css/chunk-3d197ff2.41a4938a.css rel=prefetch>
<link href=/css/chunk-59c0bb64.5c5a738e.css rel=prefetch>
<link href=/css/chunk-9c174052.f61d504d.css rel=prefetch>
<link href=/js/chunk-2d0cb6c9.6f0e1b98.js rel=prefetch>
<link href=/js/chunk-2d0daa98.0a3e1596.js rel=prefetch>
<link href=/js/chunk-2d0e492d.906939e5.js rel=prefetch>
<link href=/js/chunk-2d0f09f3.0b7f65a0.js rel=prefetch>
<link href=/js/chunk-2d23822a.e6ff2c19.js rel=prefetch>
<link href=/js/chunk-3d197ff2.84387d17.js rel=prefetch>
<link href=/js/chunk-59c0bb64.69e16c73.js rel=prefetch>
<link href=/js/chunk-9c174052.d60ea927.js rel=prefetch>
<link href=/css/app.c98bb6bf.css rel=preload as=style>
<link href=/css/chunk-vendors.e6ada503.css rel=preload as=style>
<link href=/js/app.0ef46ced.js rel=preload as=script>
<link href=/js/chunk-vendors.98b2663d.js rel=preload as=script>
<link href=/css/chunk-vendors.e6ada503.css rel=stylesheet>
<link href=/css/app.c98bb6bf.css rel=stylesheet>

Shouldn't they be loaded only when they are needed, that is, when you go to a page using a router (SPA application), the files of this page are loaded?!
Now I can easily load the main page of the site - enable offline mode in devtools and navigate through routes successfully loading templates from the local cache. (without pictures and other materials). Is this the norm? As for me, this seriously affects the page loading speed. Or is it made for search robots? Explain.
From vue to you.

Answer 1

preload, prefetch