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

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

Это может быть из-за того, что несколько страниц (или компонентов, если вы работаете с фреймворками) загружаются в начале, когда нужно загрузить только одну.

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

Вступление

Эта статья посвящена разделению кода в Vue. В частности, речь идет о разделении кода компонентов во Vue по маршруту. Это важная тема, потому что разделение кода поможет вам быстрее запустить ваш сайт. Это связано с тем, что загружаются только необходимые компоненты, и вы можете загрузить другие компоненты вместе с ними, если хотите. Скорее всего, вы будете использовать это при работе над большими проектами, состоящими из нескольких компонентов и маршрутов. Разделение кода делает наш код более производительным и сокращает время загрузки.

Чтобы получить максимальную отдачу от этого поста, было бы лучше иметь проект Vue с настроенным Vue Router. Для этого вам понадобится Router, потому что мы собираемся применить разделение кода к нашим маршрутам. Конечно, как я уже упоминал ранее, вы можете делать это даже с другими фреймворками, здесь нет ничего специфичного для фреймворка. Всего существует 3 подхода к реализации разделения кода. Мы будем использовать один из них, который называется динамический импорт. Подробнее о них можно узнать в документации Webpack.

Аналогия понятий

Подумайте о том, чтобы пить сок из емкости. Вы не опорожняете весь контейнер, выпиваете столько, сколько хотите, а затем кладете обратно в контейнер. Что мы делаем, так это достаем стакан, чтобы выпить. Если хотим еще, продолжаем наливать в стакан еще сока. При разделении кода происходит нечто подобное. Может показаться, что это большая установка, но это довольно быстро. Итак, приступим!

Настройка проекта

У вас должен быть настроен проект Vue с Vue Router. Если у вас его нет, сделайте простой. Чтобы результат разделения кода был очевиден, должно быть более одного компонента. Не имеет значения, есть ли внутри компонентов только <h1>, важно то, что вы действительно применяете это, чтобы лучше понять это. Идите вперед и создайте проект, если вы еще этого не сделали. Вот пример:

Теперь сначала вам нужно установить плагин динамического импорта для Babel.

Причина, по которой Babel требует этот плагин, заключается в том, что, хотя Webpack понимает динамический импорт (который мы используем) и соответственно связывает пакеты, на стороне сервера нам нужен Babel, чтобы понять и перенести его. Сатьяджит Саху довольно хорошо объяснил это в babeljs Slack:

Затем мы включаем наш недавно установленный плагин в конфигурационный файл Babel.

Готово! А теперь перейдем к главному.

Реализация разделения кода

Обычный способ импорта компонентов для включения в файл router.js выглядит следующим образом:

Сохраните текущий код и запустите его в режиме разработки.

Посетите это в Chrome, Firefox или любом браузере по вашему выбору. Теперь перейдите в консоль из инструментов разработчика [F12 на клавиатуре]. Перейдите на вкладку «Сеть». Теперь перезагрузите страницу. Вы увидите, что оба компонента загружаются. После выбора js из фильтров (он немного выше окна фактических результатов, см. Снимок экрана ниже) вы увидите app.js, посмотрите на его размер.

Без разделения кода при начальной загрузке компонент About связывается с компонентом Home и загружается, даже если он нам еще не нужен. Пора это изменить. Существует еще один способ импорта, основанный на Promise, поэтому не забудьте включить polyfill для старых браузеров, которые не поддерживают Promise.

И мы закончили. Это было быстро! Мы создали функцию, возвращающую импорт. Это синтаксис динамического импорта. Каждый раз, когда webpack видит такой импорт, он генерирует фрагмент, также называемый разделением кода, в ответ на Promise. Теперь сохраните код, перезагрузите страницу и снова проверьте вкладку «Сеть», компоненты загружаются не сразу. Начните просматривать свои маршруты один за другим, и вы увидите, что компоненты будут появляться в окне результатов по мере посещения их маршрутов. Вот изображения моей вкладки «Сеть», когда я посещаю оба своих маршрута один за другим:

Ты сделал это!! Выпей немного того сока, что был раньше. Но не забывайте не проглатывать все это 😉.

Но подождите, что это? все наши компоненты во вкладке Network представлены числами. Так неинтуитивно. Давайте решим эту проблему: добавьте этот комментарий к импортируемым файлам.

Webpack интерпретирует эти комментарии буквально как имена блоков. Имена, указанные в качестве значений для webpackChunkName, будут использоваться для представления конкретного компонента на вкладке «Сеть» вместо чисел. И теперь вы можете узнать, какой файл вы просматриваете, с помощью инструментов разработчика. Вероятно, вы увидите, что компонент About все еще присутствует при начальной загрузке. Однако беглый взгляд на размер файла покажет, что это не фактическая загрузка компонента, поскольку размер равен 0 байтам. Вероятно, Vue работает за кулисами. Фактический компонент загружается только тогда, когда мы посещаем его маршрут.

Пример из более реального мира

Я привел пример емкости для сока. Но какое отношение это имеет к нам на самом деле?

Давайте посмотрим, как это работает в реальном приложении. Например, у нас есть веб-сайт с загруженным изображениями маршрутом и домашним маршрутом, а также некоторыми другими маршрутами. Если мы загрузим веб-сайт, домашний компонент загрузится первым, как и следовало ожидать. Теперь возможно, что этот домашний компонент будет иметь некоторую анимацию или изображения, чтобы привлечь внимание пользователя. Но эта страница будет отображаться медленно, потому что другой маршрут (компонент) имеет много изображений. Также может быть другой компонент с несколькими анимациями. Все эти компоненты перетащат за собой домашнюю страницу. Можно было бы понять, почему страница с большим количеством изображений будет медленно отображаться / загружаться после просмотра ее содержимого. Но главная страница любого сайта должна загружаться быстро. Разделение кода на компоненты на основе их маршрутов было бы одним из идеальных решений. Практический пример, когда мы можем столкнуться с такой проблемой, - это клон Instagram или Pinterest.

Теперь, когда вы увидели, что может сделать для вас разделение кода, почему бы не посетить документацию Webpack и также не проверить два других подхода. Может быть, вы окажетесь в ситуации, когда один подход не сработает, но вам идеально подойдет другой. Впервые я столкнулся с разделением кода на этом ресурсе сообщества Egghead.io. Проверьте это тоже.

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

Первоначально опубликовано на dev.to.

Эта история публикуется в журнале Noteworthy, куда ежедневно приходят более 10 000 читателей, чтобы узнать о людях и идеях, формирующих наши любимые продукты.

Следите за нашей публикацией, чтобы увидеть больше историй о продуктах и ​​дизайне, представленных командой Journal.