Разделяне на кода
Разделянето на кода е техника, която разбива големия JavaScript пакет на по-малки части, които се зареждат при поискване, така че потребителите да изтеглят само кода, необходим за страницата, която разглеждат.
Модерните уеб приложения могат да съдържат милиони редове JavaScript код. Без разделяне на кода, целият този код се обединява в един файл, който всеки потребител трябва да изтегли, преди приложението да стане интерактивно, дори ако посещава само една страница. Разделянето на кода разделя пакета на приложението на по-малки части въз основа на маршрути, компоненти или функционалности. Когато потребител посети началната страница, той изтегля само кода на началната страница.
Когато премине към страницата с настройки, този код се зарежда при поискване. Библиотеки, използвани само в определени функционалности, се разделят в собствени части. Съществуват няколко подхода за разделяне на кода. Разделянето по маршрути зарежда кода за всяка страница поотделно (най-често срещаният подход). Разделянето по компоненти зарежда тежки компоненти при поискване (като богат текстов редактор, който е необходим само при редактиране). Разделянето на библиотеки отделя зависимостите от трети страни в собствени кешируеми части.
На практика
- SaaS табло намали първоначалния си JavaScript пакет от 3,2MB на 450KB чрез разделяне на кода по маршрути, което направи страницата за вход да се зарежда за под 2 секунди вместо за 8
- Сайт за електронна търговия лениво зареди компонента си за продуктови отзиви (който включваше тежък богат текстов редактор), спестявайки 200KB от първоначалното зареждане на продуктовата страница
- Next.js приложение автоматично разделя кода по маршрути, така че началната страница на тяхното 50-странично приложение зарежда само 120KB JavaScript вместо общите 4MB
- Уеб приложение раздели библиотеката си за графики в отделна част, така че потребителите, които никога не посещават таблото за анализи, не изтеглят 500KB библиотека за графики
Не сте сигурни как се отнася за Вас?
Старши инженер разглежда сайта Ви, присъствието Ви в търсачките и начина, по който стигат запитванията до Вас, след което записва трите неща, които си струва да се поправят първо. Документът остава за Вас във всеки случай.