Ускоряют ли асинхронные компоненты время загрузки?

Question

Я использую Vue и Webpack в большом проекте и хочу оптимизировать загрузку некоторых компонентов.Я уже лениво загружаю свои страницы, но мне интересно, смогу ли я сделать шаг вперед и динамически загрузить подкомпоненты внутри этих страниц.

Я хочу загрузить подкомпонент ("my-modal" в приведенном ниже примере) после отображается основной компонент (страница) (чтобы ускорить время загрузки страницы),Этот подкомпонент является относительно тяжелым и означает, что его часто открывают, но по умолчанию он скрыт (модальный).Поэтому моя стратегия заключается в том, чтобы загрузить ее сразу после страницы, но не с страницей, чтобы страница могла загружаться быстрее.

Я сталкивался с Async Components vue , но я не уверен, может ли это помочь, не так ли?

Вот пример того, что я делал со старымшкольный "статический" импорт:

// page.vue

<script>
import myModal from "@/components/my-modal";

export default {
  components: {
    myModal,
  },
}
</script>

Вот пример того, как я динамически импортирую свой подкомпонент (он же "асинхронные компоненты"):

// page.vue

<script>
export default {
  components: {
    myModal: () => import("@/components/my-modal"),
  },
}
</script>

Я регистрирую свойкомпонент локально ( локальная регистрация ), но я не уверен, что это лучший способ, может быть, это другой вопрос ...

Answer 1

Для всех намерений и целей ... вероятно, нет.

В современных современных устройствах, браузерах и доступе в Интернет этот компонент должен быть довольно значительным, чтобы обеспечить общее ускорение загрузки страницы.Если бы это была просто разметка и код, я бы с трудом поверил, что один компонент даже приблизится к размеру, скажем, 700 КБ (особенно если он минимизирован и сжат).Во всех случаях, кроме наихудшего подключения к Интернету, браузер справится с этим без каких-либо проблем, особенно если компонент включен в основной комплект для сайта.

Однако, если ваш компонент делает некоторые тяжелые вычислительная работает по прибытии, тогда, возможно, будет ускорена ее асинхронная загрузка (так как браузер может "продолжить" загрузку страницы в ожидании прибытия модального режима).

Однако однако , большинство браузеров допускают одновременное выполнение только одного количества запросов XHR к одному домену (я думаю, что Chrome по умолчанию равен 4).Ленивая загрузка файла будет означать, что запросы, сделанные самой страницей, имеют приоритет, но наличие большего количества файлов для загрузки по нескольким запросам, чем для объединения в один, может быть в целом медленнее.1015 * однако , браузеры отлично кешируют эти запросы, поэтому последующие посещения вашего сайта, вероятно, не будут учитывать эту проблему.

Ленивые загрузочные модули действительно обеспечивают ускорениекогда вы можете лениво загружать целые разделы вашего сайта только тогда, когда пользователю нужен доступ к ним, как на маршрутах.

Окончательный однако , однако, это то, что хорошопопрактикуйтесь , чтобы не обременять браузеры и мобильные устройства ненужным раздуванием, и хотя ленивая загрузка этого модуля может не иметь заметной разницы в скорости, в целом это может быть неплохой идеей, в зависимости от ваших потребностей и времени загрузки.Если посетителю никогда не нужно просматривать модальное окно, и вы загружаете модальное, когда это необходимо ... есть над чем подумать, так как это может привести к задержке пользовательского интерфейса, но будет лучше для общего большего процента ваших пользователей.

Если вы пытаетесь сделать свой сайт более доступным для пользователей с плохим Интернетом и знаете, что модальное будет часто использоваться, было бы, вероятно, лучше загрузить его вместе со страницей, поскольку это часть функциональности страницы.

Answer 2

При динамическом импорте будет создан новый файл, и этот новый файл будет загружен только тогда, когда пользователь перейдет на эту конкретную страницу, а не когда пользователь перейдет на /.

Это увеличивает скорость загрузки и уменьшаетбайты, которые пользователь должен загрузить в тот момент, когда он заходит на ваш сайт.