Коди, що розділяються за допомогою Parcel Web App Bundler

309

Від автора: загальні коди!! Дуже модне вираження в сучасній розробці. Сьогодні ми дізнаємося, що це таке, а також дізнаємося, як дуже легко розбивати код через parcel.

Що таке розбиття коду?

Якщо ви вже знаєте, можете пропустити цю частину. Інших же запрошую читати далі…

Якщо ви закінчили front end розробку в будь-якому JS фреймворку, ви напевно спакували всі свої модулі в один великий JS файл, який прикріпили до веб-сторінці. Але стоп, цей файл дуже великий! Ви написали своє чудове (і складна) веб-додаток, в ньому так багато частин… пакети повинні бути величезними. І чим більше вони, тим довше вони завантажуються на повільних мережах. Запитайте себе, чи потрібен користувачеві весь цей функціонал відразу ж?

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

Це несправедливо по відношенню до користувачів!! Було б круто, якщо б ми могли давати користувачам необхідне тільки тоді, коли це потрібно.

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

Коди, що розділяються за допомогою Parcel Web App Bundler

Що таке цей новий Parcel?

Parcel – це «Сліпуче швидкий пакувальник веб-додатків без налаштувань».

Він дуже сильно спрощує створення модулів!! Якщо ще не чули, рекомендую цю статтю від Indrek Lasn.

Давайте розділяти!

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

npm init

Або

yarn init

Виберіть будь-яку команду (мені подобається yarn) і створіть файли нижче.

Коди, що розділяються за допомогою Parcel Web App Bundler

Ідея в тому, що ми будемо завантажувати контент index.js в файл index.html по події (у нас це буде натискання кнопки) будемо завантажувати someModule.js і рендери з його допомогою контент.

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

Code Splitting like Humans
Click

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

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(). Ця функція асинхронно завантажує модуль на вимогу. Як використовувати:

import(‘./path/to/module’).then(function(page){
//Do Something
});

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

import(‘./someModule’).then(function (page) {
page.render(document.querySelector(“.holder”));
});

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

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 автоматично опрацює всі налаштування!

parcel index.html

Він створить ці файли.

Коди, що розділяються за допомогою Parcel Web App Bundler

Відкрийте в браузері і подивіться.

Коди, що розділяються за допомогою Parcel Web App Bundler

Коди, що розділяються за допомогою Parcel Web App Bundler

Подивіться в консоль, someModule завантажується тільки після кліку на кнопку. На вкладці network модуль завантажується через codesplit-parcel.js після виклику функції import. Розділення коду – це щось дивовижне. Якщо це так легко, немає сенсу його не застосовувати.