Bundlers

В този урок ще говорим за bundlers (един по-контретен), а някой друг път може би и за task runners.

Някои от по-популярните са Browserify, Brunch, Parcel и Webpack.

По принцип основното предназначение на bundler-ите е да съберат няколко файла в един. Това само по себе си естествено е прекалено елементарно. Нещо подобно бях описал и в урока си GIT post-merge hook за комбиниране и minify-ване на JavaScript.

Транспилиране

Модерните bundler-и правят не само това. Те включват и обработка на самия код, която може би е най-редно да се нарече transpile (транспилиране). Терминът е много близък до compile (компилиране) и разликата е наистина малка.

Транспилирането може да се смята за компилиране. То е по-скоро компилиране при специялни обстоятелства. Транспилирането е копмилиране, при което запазваме сходно ниво на абстракция. Така че „компилиране“ винаги е правилен термин, но не винаги е най-точно описващия.

Източник: Compiling vs Transpiling

Това транспилиране може да позволи да ползваме нов синтаксис, който не се поддържа от всички браузъри. При транспилиране кодът се променя, така че да свърши същата работа, но със стария синтаксис.

Ползата е, че новите синтаксиси най-често са по-кратки и по-лесни за писане. От там – по-лесни и за поддръжка.

Минифициране

Това го има и в предния ми пример, но зависи от външна услуга. В коментарите към урока се споменава, че не е перфектно решение. Bundler-ите често пъти имат plugin-и за минифициране на кода.

За който не е запознат – това отново е свързано с промени по синтаксиса. Тук идеята не е поддръжка от стари браузъри, а намаляне на дължината. Примерно – ако имам често-срещана променлива с много дълго име – при минифициране тя може да се преименува просто на a. Така ще спестим ценни байтове при зареждане на script-ове.

Колко ще спестите зависи от дължината на файла. Зависи също и от минификатора, който ще използвате (има твърде много). Но някакви средно стойности показват, че файловете намаляват с 30-40%. Това си е много добре!

Източник: A measurement study of JavaScript minification effectiveness