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

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

Проще говоря, маршрутизация на стороне клиента принимает URL-адрес и условно отображает указанный компонент, объявленный в конфигурации маршрутизации.

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

Чтобы бороться с этим, мы можем использовать разделение кода для условной загрузки определенных частей пакета (или, в нашем случае, определенных страниц) на основе URL-адреса. И хорошие новости! Vue-router с функцией динамического импорта webpack сделает все за нас. Все, что нам нужно сделать, это обновить наши компоненты импорта, чтобы использовать функцию динамического импорта: import (‘…’).

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

import Vue from 'vue';
import Router from 'vue-router';
// Typical ES6 imports
import RpPublishers from './containers/Publishers.vue';
import RpPublisher from './containers/Publisher.vue';
Vue.use(Router);
const basePath = '/publishers';
export default new Router({
  mode: 'history',
  routes: [
    {
      path: `${basePath}/:id/edit`,
      component: RpPublisher
    },
    {
      path: `${basePath}/new`,
      component: RpPublisher
    },
    {
      path: `${basePath}`,
      component: RpPublishers
    }
  ]
});

Довольно просто, здесь нет ничего нового. Либо Publisher.vue, либо Publishers.vue обрабатываются на основе пути маршрута. Когда он будет скомпилирован, оба файла будут объединены и обслуживаются вместе.

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

import Vue from 'vue';
import Router from 'vue-router';
// Replace the standard import with a function returning the 
// results from the import function 
const RpPublishers = () => import('./containers/Publishers.vue');
const RpPublisher = () => import('./containers/Publisher.vue');
Vue.use(Router);
const basePath = '/publishers';
export default new Router({
  mode: 'history',
  routes: [
    {
      path: `${basePath}/:id/edit`,
      component: RpPublisher
    },
    {
      path: `${basePath}/new`,
      component: RpPublisher
    },
    {
      path: `${basePath}`,
      component: RpPublishers
    }
  ]
});

Давайте разберемся, что происходит. Когда приложение компилируется, webpack видит, что функция импорта вызывается на пути к файлу, и создает «кусок», отдельный от основного пакета. При вызове фрагменты вводятся через теги сценария, и во время выполнения, когда маршрутизатор находит путь, соответствующий маршрутам, vue-router обнаруживает, что это асинхронно загруженный компонент, и задерживает рендеринг компонента до тех пор, пока фрагмент компонента не завершит загрузку.

Вот и все - асинхронный рендеринг компонентов на основе маршрутов. Так легко и так просто реализовать! Vue + VueRouter = ❤.