#vue.js #webpack #vuex #lazy-loading #vue-router
#vue.js #webpack #vuex #отложенная загрузка #vue-маршрутизатор
Вопрос:
Итак, я только что перешел к теме Vue router сегодня. Я знаю, что это помогает содержимому загружаться быстрее, предотвращая обновление всей страницы каждый раз, а добавляя только необходимые компоненты.
Но разве он не просто загрузил всю bundle.js файл (с помощью Webpack) после того, как вы уже посетили домашнюю страницу? Итак, поскольку мы уже загрузили весь JS-файл при первом посещении, не было бы необходимости вызывать отдельные JS-файлы при посещении разных страниц?
Это урок, который я смотрел.
Ответ №1:
Основное преимущество, о котором вы говорите, — это переход с одного URL на другой.
Обычно для этого требуется полная загрузка страницы, например
Page1.html 👉 click link 👉 Page2.html
- JS - JS
- CSS - CSS
- Images - Images
но при использовании компонентного маршрутизатора вам нужно только поменять местами части страницы, которые изменились, без перезагрузки всего вашего макета.
Это действительно лежит в основе того, что известно как одностраничное приложение, где ваше приложение буквально представляет собой одну HTML-страницу с частями внутри нее, которые реагируют на изменения URL.
URL-адрес можно изменить, не требуя полной загрузки страницы, либо манипулируя фрагментом URI (он же хэш), либо используя History API браузера.
В Vue Router этот выбор регулируется mode конфигурацией.
«Но разве он не просто загрузил всю bundle.js файл»
Не обязательно. Смотрите Маршруты отложенной загрузки.
Комментарии:
1. Спасибо за ответ. Итак, чтобы уточнить, даже если я вижу app.js (js-файл webpack bundle) на вкладке Сеть в инструменте веб-разработки он включает не ВСЕ файлы? Отложенная загрузка автоматически ИСКЛЮЧИТ ненужные файлы .js для этой конкретной страницы, верно?
2. Правильно, но это касается не только файлов JS (изображений, шрифтов и CSS тоже). Маршруты отложенной загрузки создают фрагменты , которые загружаются только (через асинхронный запрос), когда запрашиваются эти конкретные маршруты.