простое разделение кода в обычной программе JavaScript

1656542534 prostoe razdelenie koda v obychnoj programme javascript

от Калалау Кантрелла

Использование webpack 4 и динамического импорта

1*omrsDb09E3ZcHc9lQmTCJw
Вкусный сплит

Эта статья является частью эпизодического пособия по изучению Webpack на разных примерах. Если вам нужно освежить что погрузчики и плагины что касается Webpack, или что такое базовое webpack.config.js файл выглядит так, просмотрите эту статью, которую я написал, посвященную этим основам.

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

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

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

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

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

Обзор программы

Я хочу поделиться небольшим приложением, которое я сделал, чтобы помочь мне исследовать разделение кода с помощью Webpack. Я надеюсь, что это также поможет вам лучше понять тему. Все, что мы собираемся сделать это сделать одностраничное приложение, изображенное на изображении ниже.

1*PAgEvQIem4yR82UpPZfpVg
Вкусный маршрут

Если вы хотите придерживаться этого в редакторе кода, просмотрите код в code-split отделение этого РЕПО. После установки пакетов npm start запустит для вас сервер разработки, если вы хотите увидеть разбиение кода в действии.

Наше приложение имеет два маршрута — a домой маршрут, с которого начинает пользователь, и a вкусно маршрут. Вид для домой маршрут очень прост – только заголовок и ссылка на вкусно маршрут.

Вид для вкусно маршрут, однако, гораздо больше. Он содержит отличную анимацию пончиков, созданную с помощью SVG, а также всю разметку и CSS, сопровождающих такие вещи. Это много кода по сравнению с нашим домой маршрут. PS благодарит Бена Виссера за создание анимации.

Имеет ли смысл загружать пользователя все код для этой программы, включая код для вкусно маршрут и его анимация? Только если вас интересует медленная начальная загрузка и разочарование, не говоря уже о страхе пропустить то, что могло бы произойти, если бы пользователь задержался, чтобы ваше приложение загрузилось ;). Итак, давайте выясним, как разделить код.

Во-первых, однако, это высокоуровневый обзор кода, стоящего за программой. Программа написана на ванильном JS. Я использовал только одну внешнюю библиотеку, navigo, чтобы обрабатывать нашу маршрутизацию на стороне клиента. Давайте посмотрим на index.js файл:

И вот что App модуль выполняет:

А вот пример компонента пользовательского интерфейса, наш Home компонент:

Без разделения кода

Без разделения кода вы бы послали своему пользователю один большой пакет кода, когда он сначала загрузит вашу программу. Давайте установим базовую линию, посмотрев размер нашего пакета без расщепления кода.

На рисунке ниже вы можете увидеть размер нашего пакета. 22,8 тыс. Хотя это не очень много по сравнению с реальными программами в мире, давайте представим, что это для обучения.

1*_nm-Y524qO9uVDh-NEr5EQ

Разбиение кода с динамическим импортом

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

Чтобы достичь этого, мы будем использовать функцию, которая входит в JavaScript под названием динамический импорт. Несмотря на то, что эта функция еще не попала в спецификацию ECMAScript, Webpack и Babel, позволяют нам использовать ее сейчас.

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

import('./path/to/module')

Когда Webpack видит такой динамический импорт, он не объединяет импортируемый модуль в пакет. Вместо этого он разбивает пачку на две части.

Текущий фрагмент может загружаться синхронно (как наша начальная загрузка страницы), но импортируемый нашим динамическим импортом модуль загружается асинхронно. В нашем случае это модуль для вкусно маршрут загружается, когда пользователь посещает этот маршрут.

Чтобы получить доступ к функции динамического импорта, нам понадобится npm install несколько пакетов Babel в нашем процессе сборки: babel-core, babel-loader и babel-plugin-syntax-dynamic-import безусловно нужны.

В зависимости от используемого браузера вам может не понадобиться babel-preset-env (т.е. текущая версия Chrome поддерживает весь другой синтаксис JavaScript, который мы используем), но давайте все-таки разберем его только в меру.

Затем мы настраиваем Webpack для Babel:

Итак, наконец-то, мы можем написать наш динамический импорт:

Вот что этот код говорит: когда вкусно срабатывает маршрут, сначала вытащите Tasty компонент. Затем, когда он завершит загрузку, отобразите его на странице.

Давайте посмотрим, что это делает для нас. На рисунке ниже можно увидеть, что при начальной загрузке страницы сейчас загружается пакет 10,8 тыс вместо 22,8 тыс — намного лучше! Затем, когда пользователь щелкнет, чтобы перейти к вкусно маршрут, еще один пакет 13,6 тыс загружается.

1*AcjPAOjrzFkj0eVZ9FINKQ

Webpack автоматически называет эти фрагменты – если вы хотите контролировать это, просмотрите этот раздел документов webpack.

Улучшение UX

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

Учитывая, как мы сейчас настроили вещи, страница просто зависла бы там до Tasty модуль полностью загружен. Эти несколько моментов зависания могут вызвать у пользователя вопрос, работает ли наше приложение.

Давайте улучшим этот опыт, дав пользователю сигнал, что наша программа что-то делает, пока они ожидают:

Теперь наша программа будет показывать блесну для загрузки во время Tasty погрузка компонентов. Хотя это может несколько увеличить размер нашего исходного пакета, это дает пользователю признаки того, что происходит, пока они ждут.

Этот компромисс изменяет определенную производительность для лучшего пользовательского опыта – это то, в чем дело!

1*rVRdOSa88XmWID8yzDwl2Q

Вывод и последующее чтение

Я надеюсь, что этот пример послужил простым изображением преимуществ разделения кода, а также как использовать такой инструмент, как Webpack, чтобы помочь вам это сделать.

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

Если вы хотите глубже погрузиться в некоторое подробное разделение кода, которое позволяет вам сделать веб-пакет, посмотрите optimization.splitChunks плагин, поставляемый с webpack 4.

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

Добавить комментарий

Ваш адрес email не будет опубликован.