Чому ні і як інакше?⌗

Webpack - повільний. Саме через це зʼявляється все більше альтернативних парсерів та бандлерів написаних на Rust, Go, С++ тощо. Більш системні мови, на відміну від JavaScript, дають змогу вашому залізу розкритись на повну і скоротити процес збірки в рази. Поміж комплексних рішень які вже зараз здобули популярність є два головних гравця це Vite, який побудований на основі esbuild та GO, і мій особистий фаворит - Parcel, який зроблений на основі SWC та Rust. За останній я і буду агітувати у цьому дописі.

Легко почати⌗

З Parcel неймовірно легко почати працювати, бо бандлер створений для сучасної веб розробки. З коробки він вміє працювати з усіма популярними CSS препроцессорами - sass, less, etc, або ж суперсетами синтаксису, як от JSX, PUG або файлами Vue та навіть з іншими мовами - typescript, elm А найголовніше це не потребує конфігів - взагалі. Parcel достатньо розумний, щоб проаналізувати ваш проєкт, та підвантажити необхідні плагіни без додаткових конфігів babel, webpack або vite.

Після встановлення бібліотеки вашого улюбленого фреймворка достатньо додати в проєкт parcel

npm install --save-dev parcel
# або
yarn add --dev parcel

Та створити index.html файл з наступним кодом

<html>
  <head>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="styles.scss" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script type="module" src="index.tsx"></script>
  </body>
</html>

І все. Готово. Ваш умовний React застосунок написаний на typescript разом з scss стилями вже може працювати в режимі розробника або бути зібраний в бандл за допомогою двох простих команд з вашого звичайного package.json.

{
  // …
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  // …
}

Чи зручний development режим?⌗

Якщо коротко - так. Development режим дає все те що ми так любимо в уже знайомих нам бандлерах або інструкетах на кшталт create-react-app.

Почнемо з очевидного - локальний сервер. Напевно це вже моветон не мати можливості сервети локальні файли під час розробки. Hot reloading. Звісно є підтримка автоматичного перезавантаження сторінки після зміни локальних файлів. До того ж підтримується HMR всюди де це реалізовано розробниками бібліотек, а також підтримується CSS. Browser target. За допомогою прапорця --target можна обрати будь який браузер щоб перевірити код саме в тих браузерах на які ви націлені. Lazy mode. Супер крута штука, яка реалізована також в vite, але не в webpack. При старті дев сервера у вас не буде білдитись одразу весь проєкт, а тільки ті модулі які потрібні саме для того щоб відкрити активну сторінку. Це дуже пришвидшує холодний запуск, особливо на великиї проєктах. Кешування. У Parcel дуже потужна система кешування, яка вміє кешувати поокремо все. Файли, конфіги, плагіни, dev dependencies і після перезапуску сервера Parcel перезбире лише ті файли, які змінились. Api Proxy. Отак без плагинів одразу в коробці є проксі для локальної розробки з приємним інтерфейсом для конфігурації.

Швидкість⌗

Parcel - швидкий. Все завдяки тому, що всі модулі які компілюють, генерують, оптимізують та інші -ють написані на Rust або на C++, що дає змогу працювати всім ядрам процесора вашого компʼютера. На додачу до всього все кешується між запусками, тож допоки ви не зміните файл його не треба буде перезбирати щоразу ви запускаєте проєкт.

Базою слугує компілятор SWC, який обвʼязали додатково модулями, які відповідають за комплексні проєкти написані не тільки на JS.

Білд⌗

Про цю важливу складову розробники теж не забули і з процесом білда теж все добре. З коробки, нагадую без конфігів, доступні:

  • мініфікація кода для JS, CSS та HTML
  • Tree shaking для ES Modules та CommonJS, а також для динамічних import() та CSS Modules які були викликані в JS файлі
  • компресія
  • розділення коду на шматки, тож ваш улюблена ліба хелперів буде мати окремий шматок і перевикористовуватись всюди по проєкту
  • хешування імен файлів, для більш зручної роботи з кешем браузера. Допоки файл не зміниться браузер буде тримати його у кеші
  • оптимізація зображень і конвертація, яка працює за допомогою квері параметрів як на цьому сніпеті
<picture>
  <source
    type="image/webp"
    srcset="image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x"
  />
  <source
    type="image/jpeg"
    srcset="image.jpg?width=400, image.jpg?width=800 2x"
  />
  <img src="image.jpg?width=400" width="400" />
</picture>

Build target⌗

Доволі приємний бонус для тих хто використовує сучасний JS, більшість з нас, але за вимогами треба підтримувати старі браузери. Тож Parcel вміє збирати два окремих білда спираючись на данні browserslist і на виході ми отримуємо щось на кшталт

​
<script type="module" src="app.c9a6fe.js"></script>
<script nomodule="" src="app.f7d631.js"></script>

де перше запуститься у сучасних браузерах з підтримкою ES Modules, а друге буде завантажено з поліфілами для всіх інших. Так більшість користувачів, які вчасно оновлюють браузер, не будуть страждати від наслідків більших бандлів через решту.

А як щодо великих проєктів?⌗

Тут все просто. Як тільки ви зрозумієте, що вбудованого вам не достатньо, то як і з будь яким іншим бандлером створююте файл конфігурацій і твікаєте його під свої потреби. Вже зараз є достатня кількість сторонніх плагінів і документація яка дозволяє писати свої.

Посилання⌗