Использование webpack для слияния и пакетирования нескольких компонентов Vue.js и реализации загрузки по запросу

Введение

С развитием мобильных устройств и увеличением скорости интернета требования пользователей к веб-приложениям растут, и функции, которые они должны предоставлять, также становятся более сложными. Увеличение функциональности приводит к наиболее прямому后果м - росту объемов ресурсов файлов. Для поддержания все более庞大的 кода клиента был предложен концепция модульной организации кода.Webpack,作为一种 инструмент для модульной упаковки, также становится все более популярным с распространением react.

При разработке проекта с использованием Vue, если вы хотите использовать его функциональность единичных файлов, вам необходимо использовать webpack или browserify для打包. Для больших приложений, чтобы ускорить загрузку, можно использовать функцию code split в webpack для создания разделенных打包, генерируя более小的 модули и загружая их по мере необходимости, что описано в документации Vue и vue-router:Async Components、Lazy Loading.

Code split в webpack можно использовать специальную синтаксис require.ensure или использовать синтаксис callback-require стиля AMD, например, используя синтаксис callback-require стиля AMD -

Глобальная регистрация Async Component:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

Локальная регистрация Async Component, содержимое блока script в файле с единичным компонентом:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
// Расширение опций экземпляра Vue, другие опции опущены
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

При использовании vue-router, для асинхронной загрузки компонентов под различными路由ами, в маршрутизации можно использовать такой же способ для настройки свойства component маршрута.

Здесь myAsyncComponent определен как функция-фабрика, которая выполняется только в том случае, если это необходимо, с параметром callback-require функции (да, в Vue и vue-router есть две разные функции для обработки опций компонента), которая использует обратный вызов resolve (параметр обратного вызова resolve - это опции компонента), таким образом, при выполнении скрипта打包, файл my-async-component.vue будет打包 в отдельный файл и будет загружен только тогда, когда компонент используется.

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

Эта статья рассказывает, как объединять несколько компонентов в один файл. С одной стороны, это уменьшает количество кодовых блоков, а с другой стороны, если такие компоненты используются повторно в разных местах, благодаря механизму кэширования Vue, это ускоряет загрузку компонентов впоследствии. Если эти общие компоненты долго не изменяются (например, компоненты UI), то и созданный файл не изменяется долго, что позволяет充分利用 функцию кэширования браузера для оптимизации скорости загрузки.

Сначала посмотрим на效果图. В приложении SPA с использованием vue-router все маршруты, кроме корневого, соответствующие компонентам ComponentA, ComponentB, ComponentC и т.д., объединяются и打包 в один файл. При первом загрузке страницы в панели Network разработчика можно увидеть, что в этот момент не загружается файл 0.a5a1bae6addad442ac82.js, содержащий эти компоненты. При нажатии на ссылку Page A загружается этот файл, а при нажатии на ссылки Page B, Page C файл не загружается повторно.

Сначала создадим проект с помощью командной строки vue-cli, используя шаблон проекта webpack с включением vue-router. В директории src/components создайте директорию CommonComponents, в которой создадим три компонента: ComponentA, ComponentB, ComponentC.

В то же время в директории CommonComponents создайте файл index.js, содержимое которого следующее:

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

Таким образом, нам нужно только использовать особый синтаксис require.ensure вебпака или синтаксис callback-require стиля AMD для асинхронной загрузки index.js из директории CommonComponents, и при打包 с помощью вебпака можно реализовать объединение и打包 ComponentA, ComponentB, ComponentC этих трех компонентов. Например, в стиле callback-require AMD, форма callback-функции не имеет особых требований.

require(['component/CommonComponents'], function (CommonComponents) {
 // делайте с CommonComponents все, что вам нужно

Когда модуль component/CommonComponents загружен успешно, параметр CommonComponents в回调-функции будет объектом, содержащим параметры компонентов ComponentA, ComponentB, ComponentC.

При определении асинхронной обработки компонентов мы используем фабричную функцию resolve => {require(['./my-async-component'], resolve)}; если нужно добавить в файл конфигурации маршрутов элемент с атрибутом component для компонента ComponentA, то как должна быть определена фабричная функция? Запомните, что resolve — это回调-функция для обработки параметров компонента, и в предыдущем коде CommonComponents — это объект, содержащий несколько параметров компонентов. Таким образом, мы можем использовать податрибуты CommonComponents в вызове resolve. Мы пишем функцию getCommonComponent, которая возвращает фабричную функцию для получения соответствующего параметра компонента по имени.

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

В местах использования компонента в шаблоне компонента или маршрутизации и т.д., можно использовать функцию настройки компонента, такую как getCommonComponent('ComponentA'), например: в маршрутизации.

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

Файлы, созданные в конце, показаны на следующем рисунке, файл 0.a5a1bae6addad442ac82.js содержит компоненты ComponentA, ComponentB, ComponentC.

Резюме

Вот и все, что есть в этой статье, надеюсь, что содержимое статьи поможет вам в изучении или работе. Если у вас есть вопросы, пожалуйста, оставляйте комментарии для обсуждения, спасибо за поддержку呐喊 руководства.

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен пользователями самостоятельно, сайт не имеет права собственности, не был обработан вручную, и не несет ответственности за связанные с этим юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @), чтобы сообщить о нарушении, и предоставьте соответствующие доказательства. Если будет установлено, что содержимое нарушает авторские права, сайт незамедлительно удалит涉嫌侵权的内容。