Рубрики
Без рубрики

Кодовое расщепление с vue.js и webpack

Чем дольше нужна для вашего приложения для загрузки, тем более расстраивая это для пользователя, особенно на мобильном. В этой статье я покажу вам, как «Код Split» A приложение Vue.js с WebPack, чтобы пользователи могли видеть и взаимодействовать с вашим приложением намного быстрее.

Автор оригинала: Anthony Gore.

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

Code-Spliting-Vue-js.png

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

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

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

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

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

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/07/03.

Async компоненты

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

Допустим, вы объявляете компонент, используя Компонент API I.E. Vue.component (имя, определение) Отказ Вместо того, чтобы иметь объект определения в качестве второго аргумента, async-компоненты имеют функцию. Эта функция имеет две заметные функции:

  1. Это Исполнитель Для обещания то есть есть решить аргумент
  2. Это Функция завода I.e. Он возвращает объект (в этом случае определение компонента).
Vue.component('async-component', (resolve) => {
  resolve({
    template: '
Async Component
',
    props: [ 'myprop' ]
  });
});

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

Загрузка динамического модуля

Мы также понадобится помощь WebPack. Скажем, мы абстрактны наше определение компонента в файл модуля ES6:

Asynccomponent.js.

export default {
  template: '
Async Component
',
  props: [ 'myprop' ]
}

Как мы можем получить наше приложение Vue.js, чтобы загрузить это? Вы можете испытать желание попробовать что-то вроде этого:

import AsyncComponent from './AsyncComponent.js'`;
Vue.component('async-component', AsyncComponent);

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

Импортировать()

В настоящее время невозможно динамически загружать файл модуля с помощью JavaScript. Однако есть функция загрузки динамического модуля в настоящее время под предложением Для Ecmascript называется Импорт () Отказ

У WebPack уже есть реализация для Импорт () И относится к этому как точку разделения кода, вкладывая запрошенный модуль в отдельный файл, когда Bundle создается (отдельный кусок , на самом деле, но подумайте об этом как отдельный файл).

Импорт () принимает имя файла в качестве аргумента и возвращает обещание. Вот как мы загрузим наш вышеуказанный модуль:

Main.js.

import(/* webpackChunkName: "async-component" */ './AsyncComponent.js')
  .then((AsyncComponent) => {
    console.log(AsyncComponent.default.template);
    // Output: 
Async Component

  });

Примечание. Если вы используете Babel, вам нужно добавить Синтаксис-динамический импорт Плагин, так что Babel может правильно разобрать этот синтаксис.

Теперь, когда вы создаете свой проект, вы заметите, что модуль появляется в собственном файле:

Код-расщепление-VUE-JS-02.png

Еще одно примечание: вы можете дать динамически импортированный блокнот модуля имя, так что его более легко идентифицируемый; Просто добавьте комментарий перед именем файла так же, как я проделал в приведенном выше примере.

Динамическая компонент загрузка

Принесите кусочки вместе сейчас: с Импорт () Возвращает обещание, мы можем использовать его в сочетании с функциональностью Async Async. WebPack будет пушиться AsyncComponent Отдельно и динамически загружают его в приложение через AJAX, когда приложение вызывает его.

Main.js.

import Vue from 'vue';

Vue.component('async-component', (resolve) => {
  import('./AsyncComponent.js')
    .then((AsyncComponent) => {
      resolve(AsyncComponent.default);
    });
});

new Vue({ 
  el: '#app' 
});

index.html.


  
This part is included in the page load

На начальной нагрузке страница будет отображаться как:


  
This part is included in the page load

Когда main.js Запускается, что он будет инициировать запрос на ASYNC Component Module (это происходит автоматически, потому что Import (Import () WebPack’s Import (), включает в себя код, который будет загружать модуль с AJAX!).

Если вызов AJAX успешен, и модуль возвращается, обещание разрешается, а компонент может быть отображен, поэтому Vue теперь будет повторно отображать страницу:


  
This part is included in the page load

  
Async Component

Вот диаграмма, чтобы помочь вам визуализировать это:

Один файловые компоненты

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

Asynccomponent.vue.

Этот синтаксис для импорта даже Neater:

new Vue({ 
  el: '#app',
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
});

Архитектура расщепления кода

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

Самый очевидный путь – это по страница Отказ Например, скажем, у вас есть две страницы в вашем приложении, домашней странице и о странице. Эти страницы могут быть обернуты внутри компонентов Home.vue и О.Вуэ И это могут быть разделенные точки приложения.

Но есть и другие способы, например, вы можете разделить на любых компонентах, которые условно отображаются (вкладки, модали, раскрывающиеся меню и т. Д.) Или это ниже сгиба страницы.

Для моей следующей статьи я исследую некоторые разные архитектуры разделения кода для SPA Vue.js, поэтому оставайтесь настроенными!

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше

Читайте ещё по теме: