Автор оригинала: FreeCodeCamp Community Member.
Kalalau Cantrell
Использование WebPack 4 и динамический импорт
Эта статья является частью эпизодического руководства для изучения учебного завода через различные примеры. Если вам нужен переподготовка на что Погрузчики и плагины насколько WebPack идет, или какой базовый webpack.config.js Файл выглядит как, проверьте Эта статья Я писал, что фокусируется на этих основах.
Если вы, как будто я, вы услышали термин-расщепление кода до и иметь Читайте некоторые об этом. Но, возможно, вы продолжали бегать в посты о том, как это сделать с этим или иным образом, а не объяснениями, что это для того, чтобы и основной пример, показывающий эту цель.
Хотя я высоко ценностные рамки и скорость и структура, которую они приводят к кодированию, особенно в командах, я также ценю понимание концепций программирования так же глубоко, как это практически возможно.
Это часто означает, что если я пытаюсь выучить новую концепцию, я постараюсь разложить эту концепцию в более мелкие субконицы, а затем изучить каждую изоляцию, прежде чем интегрировать их все вместе.
Чтобы использовать непрограммирующий пример, если хотел узнать, как longboard, я бы хотел, чтобы сильно сосредоточиться на том, чтобы сохранить мой баланс, стоя на Longboard, прежде чем я беспокоюсь о том, чтобы идти по быстрому, делать трюки, или настраивать мою настройку Longboard.
Итак, узнать о расщеплении кода, я решил, что хочу сделать как можно маленькое и легко в приложении, который для меня не имел никаких структур, и ничего нравятся.
Обзор приложения
Я хочу поделиться маленьким приложением, которое я сделал, чтобы помочь мне исследовать кодовую расщепление с помощью WebPack. Моя надежда заключается в том, что это может помочь вам лучше понять тему. Все, что мы собираемся сделать, это сделать приложение для одной страницы, изображенное в подведенном ниже GIF.
Если вы хотите выполнить в редакторе кода, ознакомьтесь с кодом в Код-разделение ветвь Это репо Отказ Как только вы устанавливаете пакеты, NPM начать Запустит сервер разработки для вас, если вы хотите увидеть кодовую расщепление в действии.
Наше приложение имеет два маршрута – A Главная Маршрут, который пользователь запускается, а вкусно маршрут. Вид на Главная Маршрут очень простой – просто заголовок и ссылка на вкусно маршрут.
Вид на вкусно Маршрут, однако, имеет гораздо больше. К услугам гостей восхитительная анимация пончика, сделанная с SVG и всей разметкой и CSS, которая идет вместе с такими вещью. Это много кода по сравнению с нашими Главная маршрут. Снимание Спасибо Бен Виссар для создания анимации.
Есть ли смысл иметь пользователя загрузки Все Код для этого приложения прямо сейчас, включая код для вкусно Маршрут и его анимация? Только если вас интересует, вызывая медленные начальные времена нагрузки и разочарования, не говоря уже о страхе отсутствуют о том, что могло бы произойти, если пользователь застрял для вашего приложения для загрузки;). Итак, давайте выясним, как кодировать – разделить эту вещь.
Во-первых, однако, это обзор высокого уровня кода за приложением. Приложение написано в ванили JS. Я использовал только одну внешнюю библиотеку, Навиго , чтобы обработать нашу маршрутизацию на стороне клиента. Давайте посмотрим на index.js файл:
И вот что Приложение Модуль делает:
И вот пример пользовательского интерфейса, нашего Главная составная часть:
Нет кодового расщепления
Без кодовых расщеплений вы будете отправлять вашего пользователя одного большого пучка кода, когда они изначально загружают ваше приложение. Давайте установим исходную линию, глядя на размер нашего комплекта здесь без кодового расщепления.
Вы можете увидеть на рисунке ниже, что размер нашего пакета 22.8k Отказ Хотя это не очень большой по сравнению с настоящими приложениями в мире, давайте притворяться, что это ради обучения.
Раскащение кода с динамическим импортом
Теперь давайте принесем кодовую расщепление! Помните, что мы хотим сделать, это держать пользователя от необходимости загрузить код, необходимый для визуализации вкусно Маршрут, пока он не нужен.
Для этого мы собираемся использовать функцию, которая приходит к JavaScript под названием Динамический импорт Отказ Несмотря на то, что эта функция еще не приземлилась в спецификации Ecmascript, WebPack и Babel позволяют нам использовать его сейчас.
Динамический импорт позволяет асинхронно получать модуль. Это возвращает обещание. В рамках обратного вызова обещания мы можем указать, что делать с модулем, как только он загружен. Синтаксис для динамического импорта выглядит так:
import('./path/to/module')Когда WebPack видит, как это видит динамический импорт, он не подключает импортный модуль в текущий пучок. Вместо этого он разбивает пакет на две меньшие куски.
Нынешний кусок может быть синхронно загружен (например, наша нагрузка на начальную страницу), но модуль, который импортируется нашим динамическим импортом, является асинхронно загруженным. В нашем случае модуль для вкусно Маршрут загружен, когда пользователь видит этот маршрут.
Чтобы получить доступ к функции динамической импорты, нам нужно NPM установить Несколько пакетов Babel в наш процесс сборки: Babel-Core , Babel-Loader и Babel-Plugin-синтаксис-динамический импорт определенно необходимы.
В зависимости от браузера, который вы используете, вам может не понадобиться Babel-Preset-Env (то есть нынешняя версия Chrome поддерживает все остальные синтаксис JavaScript, который мы используем), но давайте все равно будем только для хорошей меры.
Затем мы настраиваем WebPack для Babel:
Так что, наконец, мы можем написать наш динамичный импорт:
Вот что этот код говорит: когда вкусно Маршрут срабатывает, сначала извлеките Вкусно составная часть. Затем, как только он закончит загрузку, визуализируйте его на страницу.
Посмотрим, что это делает для нас. На рисунке ниже вы можете увидеть, что нагрузка на начальную страницу загружает пакет, который 10.8k вместо 22.8k – намного лучше! Затем, когда пользователь нажимает, чтобы перейти к вкусно Маршрут, еще один пакетный кусок 13.6k скачан.
WebPack автоматически называет эти куски – если вы хотите контролировать это, проверить Этот раздел документов WebPack.
Улучшения UX
Здорово, что мы сохранили пользователей от необходимости дождаться дополнительного времени для первоначальной нагрузки. Но, вы можете догадаться, что произойдет, если пользователь был в супер медленном соединении и пытался загрузить вкусно маршрут?
С тому, как у нас есть вещи настроек, страница просто повесила там до тех пор, пока Вкусно Модуль полностью загружен. Эти несколько моментов висит могут покинуть пользователь, задаваясь вопросом, было ли наше приложение даже работать.
Давайте улучшим этот опыт, предоставив пользователя некоторую сигнал, что наше приложение делает что-то, пока они ждут:
Теперь наше приложение покажет загрузку спиннера во время Вкусно Компонентные нагрузки. Хотя это может увеличить размер нашего исходного расслоения некоторых, он дает пользователю указание, что что-то происходит, пока они ждут.
Эту компромисс обменивается некоторой производительностью для лучшего пользовательского опыта – найти этот баланс – это то, о чем это все!
Заключение и дальнейшее чтение
Я надеюсь, что этот пример служил простому изображению преимущественного разделения кода, а также как использовать инструмент, такой как WebPack, чтобы помочь вам сделать это.
Я также надеюсь, что это показало, что разделение кода не является техникой, которая полезна только для определенных структур. Фактически, приложения Vanilla JS могут воспользоваться кодовым расщеплением и даже приложениями, которые в основном являются серверными, но имеют интерактивные виджеты, встроенные здесь, и могут воспользоваться методикой.
Если вы хотите погрузиться глубже в какое-то гранулированное кодовое расщепление, что WebPack позволяет вам делать, посмотреть в Оптимизация .splitchunks Плагин, который поставляется с WebPack 4.
Пожалуйста, хлопайте, если это помогло вам узнать что-то, прокомментировать ниже какие-либо вопросы и не стесняйтесь сказать привет меня в Твиттере.