Разделяне на код на Vue-Router чрез Webpack

Ако търсите начин да подобрите производителността на времето за зареждане на страницата, разделянето на код е лесен, но ефективен начин за това. Има няколко случая на употреба, при които можете да използвате ефективно разделяне на код, но аз ще се съсредоточа върху използването му с рутер от страна на клиента, по-специално с 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 = ❤.