Компоненты Vue Async с vue-router для более быстрой загрузки страницы
Vue Js - это прогрессивный фреймворк Javascript, который в последнее время приобрел огромную популярность по правильным причинам, по крайней мере, я так думаю. В этой статье я хотел бы рассказать, как эффективно использовать vue-router для молниеносной загрузки страниц.
Наш типичный файл маршрутизатора выглядит примерно так. Примечание: мы используем Konva js.
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/auth/login'
import konvaEditor from './views/editor'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/login',
component: Login
},
{
path: '/editor',
component: konvaEditor
}
]
})
Скриншоты ниже сделаны в режиме разработки с помощью webpack-dev-server.
После сборки webpack размер результирующего пакета js составляет 9,5 МБ, а время загрузки страницы входа в систему в режиме разработки составляет ~ 910 мс.
Это выглядит абсолютно нормально, но время загрузки всегда можно улучшить. Простая настройка маршрутизатора может улучшить время загрузки страницы и уменьшить размер пакета javascript.
Теперь измените эту строку в файле роутера
import konvaEditor from './views/editor'
to
const konvaEditor = () => import('./views/editor')
Теперь после сборки размер пакета уменьшен до 7,7 МБ, а время загрузки страницы входа улучшилось и теперь составляет ~ 820 мс.
Как это возможно? С помощью настройки мы объявляем редактор холста как компонент async vue. Webpack теперь понимает это как логическую точку разделения и создает отдельный пакет для компонента редактора, а vue-router лениво загружает компонент только при посещении страницы редактора в браузере. Итак, теперь на странице входа в систему больше не нужно загружать дополнительные js, связанные с компонентами редактора.
Это лишь верхушка айсберга. При разумном использовании это сильно повлияет на время загрузки страницы. Чтобы понять это глубже, были бы чрезвычайно полезны ссылки ниже.
Francium Tech - технологическая компания, специализирующаяся на поставке высококачественного масштабируемого программного обеспечения на экстремальных скоростях. Числа нас не пугают. Если у вас есть какие-либо требования или вы хотите бесплатно проверить работоспособность архитектуры вашей системы, напишите письмо по адресу [email protected], мы свяжемся с вами!
