Статьи

Разделение кода с помощью Vue.js и Webpack

Одним из возможных недостатков объединения вашего одностраничного приложения с Webpack является то, что вы можете получить действительно большой пакетный файл, иногда размером в несколько мегабайт!

Размер пакета

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

Разделение кода — это идея, что пакет может быть фрагментирован на более мелкие файлы, что позволяет пользователю загружать только тот код, который ему нужен, когда он ему нужен.

Например, глядя на эту простую веб-страницу, мы можем определить части приложения, которые нам не нужны при начальной загрузке:

Компоненты, необходимые для начальной загрузки страницы

Компоненты, необходимые для начальной загрузки страницы

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

В этой статье я покажу вам, как Vue.js и Webpack можно использовать для разделения одностраничного приложения на файлы более оптимального размера, которые можно динамически загружать.


Вам также может понравиться:
Что нового в Vue?

Асинхронные компоненты

Ключом к разделению кода в приложении Vue.js являются асинхронные компоненты . Это компоненты, в которых определение компонента (включая его шаблон, данные, методы и т. Д.) Загружается асинхронно.

Допустим, вы объявляя компонент с помощью componentAPI, то есть Vue.component(name, definition). Вместо того, чтобы иметь определение объекта в качестве второго аргумента, асинхронные компоненты имеют функцию. Эта функция имеет две примечательные особенности:

  1. Это исполнитель обещания, то есть у него есть resolveаргумент.
  2. Это фабричная функция, т.е. она возвращает объект (в данном случае определение компонента).

JavaScript