Webpack генерирует множество chunk js под каждый компонент и одновременно загружает их. Нормально?

Question

[kr_ilya]

Заметил, что webpack генерирует свой js файл для каждого компонента vue. Вроде так и должно быть - подумал я. Но подвох я увидел в том, что они все разом загружаются при загрузке страницы.

<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>

Разве они не должны подгружаться только тогда когда нужны, т.е при переходе с помощью роутера (SPA приложение) на какую-нибудь страницу подгружаются файлы этой страницы?!
Сейчас я спокойно могу загрузить главную страницу сайта - включить offline режим в девтулах и переходить по роутам успешно загружая шаблоны из локального кэша. (без картинок и других материалов). Это норма? Как по мне это серьезно влияет на скорость загрузки страницы. Или это сделано для поисковых роботов? Объясните.

С vue на Вы.

Answer 1

[Александр]

preload, prefetch

Answer 2

[Кирилл Романов]

Судя по всему, вы используете Vue CLI.
Как уже отметил Александр, дело в предзагрузке этих ресурсов. Они загружаются браузером автоматически, когда он посчитает нужным(уже загружены основные ресурсы и т.д). Это можно отключить, тогда ресурсы будут скачиваться непосредственно при переходе к компонентам. Почитать подробнее об этом можно в документации - https://cli.vuejs.org/ru/guide/html-and-static-ass...