От автора: разделяемые коды!! Очень модное выражение в современной разработке. Сегодня мы узнаем, что это такое, а также узнаем, как очень легко разбивать код через parcel.
Что такое разбиение кода?
Если вы уже знаете, можете пропустить эту часть. Других же приглашаю читать дальше…
Если вы закончили front end разработку в любом JS фреймворке, вы наверняка упаковали все свои модули в один большой JS файл, который прикрепили к веб-странице. Но стоп, этот файл же очень большой! Вы написали свое замечательное (и сложное) веб-приложение, в нем так много частей… пакеты должны быть огромными. И чем больше они, тем дольше они загружаются на медленных сетях. Спросите себя, нужен ли пользователю весь этот функционал сразу же?
Представьте одностраничное E-Commerce приложение. Пользователь авторизуется, чтобы посмотреть список товаров. Может, он зашел просто посмотреть товары, но он вынужден тратить время и данные не только на загрузку JS для рендера списка товаров, но и JS для рендера страниц о нас, фильтров, деталей товара, заказов… и т.д. и т.п.
Это несправедливо по отношению к пользователям!! Было бы круто, если бы мы могли давать пользователям необходимое только тогда, когда это требуется.
Эта идея разбиения большого пакета на множество маленьких и называется разбиением кода. Эти маленькие пакеты загружаются асинхронно по требованию. Звучит очень сложно, но современные менеджеры пакетов типа Webpack упрощают процесс. Parcel делает все еще проще.
Что такое этот новый Parcel?
Parcel – это «Ослепительно быстрый упаковщик веб-приложений без настроек».
Он очень сильно упрощает создание модулей!! Если еще не слышали, рекомендую эту статью от Indrek Lasn.
Давайте разделять!
Я не буду использовать фреймворки (как обычно), но что с ними, что без них процесс тот же. В примере ниже будет очень-очень простой код, чисто для демонстрации процесса. Создайте пустую папку и init проект:
1 |
npm init |
Или
1 |
yarn init |
Выберите любую команду (мне нравится yarn) и создайте файлы ниже.
Идея в том, что мы будем загружать только контент index.js в файл index.html и по событию (у нас это будет нажатие кнопки) будем загружать someModule.js и рендерить с его помощью контент.
Откройте index.html и вставьте в него код ниже.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Code Splitting like Humans</title> </head> <body> <button id="bt">Click</button> <div class="holder"></div> <script src="./index.js"></script> </body> </html> |
Ничего особенного, обычный HTML шаблон с кнопкой и div, в котором мы будем рендерить контент из someModule.js. Напишем код модуля someModule:
1 2 3 4 5 6 |
console.log("someModule.js loaded"); module.exports = { render : function(element){ element.innerHTML = "You clicked a button"; } } |
Мы экспортируем объект с функцией render, которая принимает элемент и задает ему свойство innerHTML в текст «You clicked a button».
А теперь магия. В файле index.js необходимо обработать клик кнопки и динамически загрузить someModule.
Для динамической асинхронной загрузки будем использовать синтаксис функции import(). Эта функция асинхронно загружает модуль по требованию. Как использовать:
1 2 3 |
import('./path/to/module').then(function(page){ //Do Something }); |
Import асинхронная функция, поэтому она возвращает promise, который мы обрабатываем через then. В then мы передаем функцию, принимающую объект, загруженный из модуля. Похоже на const page = require(‘./path/to/module’);, только динамически и асинхронно. В нашем случае:
1 2 3 |
import('./someModule').then(function (page) { page.render(document.querySelector(".holder")); }); |
Мы загружаем someModule и вызываем его функцию render. Давайте подключим это к обработчику события нажатия кнопки.
1 2 3 4 5 6 7 8 9 |
console.log("index.js loaded"); window.onload = function(){ document.querySelector("#bt").addEventListener('click',function(evt){ console.log("Button Clicked"); import('./someModule').then(function (page) { page.render(document.querySelector(".holder")); }); }); } |
Весь код написан, давайте запустим parcel. Parcel автоматически обработает все настройки!
1 |
parcel index.html |
Он создаст эти файлы.
Откройте в браузере и посмотрите.
Посмотрите в консоль, someModule загружается только после клика на кнопку. На вкладке network модуль загружается через codesplit-parcel.js после вызова функции import. Разбиение кода – это что-то удивительное. Если это так легко, нет смысла его не применять.
Автор: Ankush Chatterjee
Источник: //hackernoon.com/
Редакция: Команда webformyself.