Webpack поставяне на сноповете на диета; Обучение с лимонов код

Отваряме поредица от публикации, в които се фокусираме върху олекотяването на нашите пакети, в тази първа публикация ви представяме инструмент, който ще ви помогне да определите кои пакети са виновни за „наднорменото тегло“ на вашето приложение.

Javascript екосистемата е невероятна, имаме библиотеки за всичко, това е като безплатен бюфет и вече имаме инструменти за пакетиране като webpack, които "магически" опаковат всичко за вас.

Това звучи чудесно, когато стартирате проект и започнете да използвате библиотеки тук и там, мислейки да си спестите работата. Изведнъж е време да влезете в производство и разбирате, че моят минифициран пакет тежи 2 мегабайта! . добре, можете да го поставите в gzip и ще го изтеглите, но давате добър товар на браузъра на вашия клиент.

Има ли значение пакетът да тежи много? Отговорът може да повлияе на вашия бизнес, ако уеб приложението ви отнема повече време, ще има потребители, които ще го пропуснат (по-добре да използвате този от конкуренцията, който е малко по-бърз и не ме оставя сух с данни и батерия), Също така, ако не контролирате теглото си от самото начало, след няколко години ще имате чудовище от няколко мегабайта, че ще ви трябва камион, за да го пренесете от едно място на друго.

Когато правим компилация на продукцията (не забравяйте, че в wepback можете да поставите флаг за генериране на минимизираното съдържание), можем да видим размера на пакетите в папката dist.

обучение

О, Боже, 2Mb пакет!

Ако разгледаме този генериран резултат (въз основа на реален проект), ще открием, че AHHHH. Имаме два мегабайта на доставчик js !, във vendor.js е мястото, където изхвърляме всички библиотеки на трети страни, изглежда има нещо от трети страни, което ни причинява тежко храносмилане.