3 шаблона расщепления кода для Vuejs и WebPack

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

Код расщепления Приложение для одного страницы – отличный способ улучшить его начальную скорость загрузки. Поскольку пользователь не должен загружать весь код в одном ударе, они смогут видеть и взаимодействовать со страницей раньше. Это улучшит UX, особенно на мобильном, и это выигрыш для SEO, поскольку Google оказывает медленные нагрузочные сайты.

На прошлой неделе я писал о Как записать приложение Split Vue.js с WebPack Отказ Короче говоря, все, что вы обертываете в одном файловом компонент, могут легко быть разделенным кодом, так как WebPack может создать точку разделения, когда он импортирует модуль, и Vue счастлив загружать компонент асинхронно.

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

В этой статье я представлю три шаблона для разделения кода A PAGE PAGE VUE.JS:

• По странице
• По странице сгибается
• По условию

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

1. По странице

Разделение вашего кода на странице – очевидное место для начала. Возьмите это простое приложение, которое имеет три страницы:

Если мы убедитесь, что каждая страница представлена собственным компонентом файлов E.G. Home.vue , О.Вуэ и Контакт .Vue Тогда мы можем использовать динамический WebPack Импорт Функция для разделения каждого в отдельный файл сборки. Затем, когда пользователь посещает другую страницу, WebPack будет асинхронно загружать файл запрошенной страницы.

Это тривиально реализовать, если вы используете Vue-маршрутизатор Поскольку ваши страницы уже должны быть в отдельных компонентах.

Маршруты

const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './About.vue');
const Contact = () => import(/* webpackChunkName: "contact" */ './Contact.vue');

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About },
  { path: '/contact', name: 'contact', component: Contact }
];

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

Теперь скажем, я загружу Контакт Страница от URL http://localhost: 8080/#/contact Отказ Когда я проверяю вкладку Network, я вижу, как загружены следующие файлы:

Обратите внимание, что Инициатор build_main.js это (индекс) Отказ Это означает, что index.html просил скрипт, который является то, что мы ожидали. Но инициатор build_1.js это bootstrap_a877 … Отказ Это сценарий WEUBL, который отвечает за асинхронно загружать файлы. Этот скрипт добавлен в сборку автоматически, когда вы используете динамический WebPack Импорт функция. Важный момент в том, что build_1.js не блокировал нагрузку на начальную страницу.

2. ниже сгиба

Ниже «сгиба» – любая часть страницы, которая не видна в ViewPort, когда страница первоначально загружается. Вы можете асинхронно загружать этот контент, поскольку пользователь обычно займет секунду или два, чтобы прочитать выше Слома, прежде чем они прокручивают, особенно в первый раз, когда они посещают сайт.

В этом примере приложение я считаю линейкой Fold, чтобы быть чуть ниже мачта. Итак, давайте включите батончик NAV и Masthead на нагрузке на начальную страницу, но что-то ниже, которое может быть загружено впоследствии. Теперь я создаю компонент под названием Внизу … и абстрактный актуальный разметку в этом:

Home.vue.vue.

Ниже пополнения

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

Примечание: ниже сгиба Чанк очень маленький (1,36 кб), и кажется, вряд ли стоит беспокоить это. Но это только потому, что это демонстрационное приложение с очень небольшим содержанием. В реальном приложении большинство страницы, вероятно, будет ниже сгиба, поэтому там может быть тонна кода, включая файлы CSS и JS для любых подменных компонентов.

3. Условное содержание

Еще один хороший кандидат на расщепление кода – это все, что показано условно Отказ Например, модальное окно, вкладки, выпадающие меню и т. Д.

Это приложение имеет модальное окно, которое открывается при нажатии кнопки «Зарегистрироваться сегодня»:

Как и прежде, мы просто перемещаем модальный код в свой единственный файловый компонент:

Home.vue.vue.

Homemodal.vue.vue.

Обратите внимание, что я положил V-если на модальном. Логический Показать Управляет открытым/закрытием модала, но он также будет условно представлять собой саму модальный компонент. Поскольку на странице Загрузите его ложь, код будет загружен только при открытии модала.

Это круто, потому что если пользователь никогда не открывает модал, им никогда не нужно загружать код. Единственный недостаток в том, что у него есть небольшая стоимость UX: пользователь должен ждать после того, как они нажимают кнопку для загрузки файла.

После того, как мы снова построим, вот как сейчас выглядит наш выход:

Еще один ~ 5кб, нам не нужно загружать фронт.

Заключение

Это три идеи для архитектуры приложения для расщепления кода. Я уверен, что есть другие способы сделать это, если вы используете свое воображение!

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

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

Учить больше