Коды, разделяемые с помощью Parcel Web App Bundler

Коды, разделяемые с помощью Parcel Web App Bundler

От автора: разделяемые коды!! Очень модное выражение в современной разработке. Сегодня мы узнаем, что это такое, а также узнаем, как очень легко разбивать код через parcel.

 

Что такое разбиение кода?

Если вы уже знаете, можете пропустить эту часть. Других же приглашаю читать дальше…

Если вы закончили front end разработку в любом JS фреймворке, вы наверняка упаковали все свои модули в один большой JS файл, который прикрепили к веб-странице. Но стоп, этот файл же очень большой! Вы написали свое замечательное (и сложное) веб-приложение, в нем так много частей… пакеты должны быть огромными. И чем больше они, тем дольше они загружаются на медленных сетях. Спросите себя, нужен ли пользователю весь этот функционал сразу же?

Представьте одностраничное E-Commerce приложение. Пользователь авторизуется, чтобы посмотреть список товаров. Может, он зашел просто посмотреть товары, но он вынужден тратить время и данные не только на загрузку JS для рендера списка товаров, но и JS для рендера страниц о нас, фильтров, деталей товара, заказов… и т.д. и т.п.

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

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

Коды, разделяемые с помощью Parcel Web App Bundler

Что такое этот новый Parcel?

Parcel – это «Ослепительно быстрый упаковщик веб-приложений без настроек».

Он очень сильно упрощает создание модулей!! Если еще не слышали, рекомендую эту статью от Indrek Lasn.

Давайте разделять!

Я не буду использовать фреймворки (как обычно), но что с ними, что без них процесс тот же. В примере ниже будет очень-очень простой код, чисто для демонстрации процесса. Создайте пустую папку и init проект:

Или

Выберите любую команду (мне нравится yarn) и создайте файлы ниже.

Коды, разделяемые с помощью Parcel Web App Bundler

Идея в том, что мы будем загружать только контент index.js в файл index.html и по событию (у нас это будет нажатие кнопки) будем загружать someModule.js и рендерить с его помощью контент.

Откройте index.html и вставьте в него код ниже.

Ничего особенного, обычный HTML шаблон с кнопкой и div, в котором мы будем рендерить контент из someModule.js. Напишем код модуля someModule:

Мы экспортируем объект с функцией render, которая принимает элемент и задает ему свойство innerHTML в текст «You clicked a button».

А теперь магия. В файле index.js необходимо обработать клик кнопки и динамически загрузить someModule.

Для динамической асинхронной загрузки будем использовать синтаксис функции import(). Эта функция асинхронно загружает модуль по требованию. Как использовать:

Import асинхронная функция, поэтому она возвращает promise, который мы обрабатываем через then. В then мы передаем функцию, принимающую объект, загруженный из модуля. Похоже на const page = require(‘./path/to/module’);, только динамически и асинхронно. В нашем случае:

Мы загружаем someModule и вызываем его функцию render. Давайте подключим это к обработчику события нажатия кнопки.

Весь код написан, давайте запустим parcel. Parcel автоматически обработает все настройки!

Он создаст эти файлы.

Коды, разделяемые с помощью Parcel Web App Bundler

Откройте в браузере и посмотрите.

Коды, разделяемые с помощью Parcel Web App Bundler

Коды, разделяемые с помощью Parcel Web App Bundler

Посмотрите в консоль, someModule загружается только после клика на кнопку. На вкладке network модуль загружается через codesplit-parcel.js после вызова функции import. Разбиение кода – это что-то удивительное. Если это так легко, нет смысла его не применять.

Автор: Ankush Chatterjee

Источник: //hackernoon.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: