⚠️ Подводные камни Code Splitting и как это влияет на Web Vitals?

У Code Splitting есть подводные камни. Первый — слишком много мелких чанков: браузер забивает очередь сетевыми запросами. Второй — водопад чанков (network waterfall): чанки грузятся последовательно, а не параллельно. Третий — tree shaking не работает, если забыть про sideEffects: false в package.json, и в бандл попадает мусор. Четвёртый — задержка при навигации: пользователь кликнул, а чанк ещё грузится. Пятый — code splitting ради code splitting, без реальной пользы, когда режут то, что не нужно резать. Всё это влияет на Web Vitals: страдает LCP, FCP, TTI. Правильная стратегия — резать по роутам и фичам, не дробить слишком мелко, использовать preload и prefetch. На собеседовании Middle и Senior важно уметь балансировать. Полный разбор стратегий — в большом видео по ссылке под этим шортсом. #codesplitting #webvitals #frontend #frontendinterview #middle #senior #techinterview #codinginterview

Иконка канала PurpleSchool
466 подписчиков
12+
7 просмотров
2 месяца назад
12+
7 просмотров
2 месяца назад

У Code Splitting есть подводные камни. Первый — слишком много мелких чанков: браузер забивает очередь сетевыми запросами. Второй — водопад чанков (network waterfall): чанки грузятся последовательно, а не параллельно. Третий — tree shaking не работает, если забыть про sideEffects: false в package.json, и в бандл попадает мусор. Четвёртый — задержка при навигации: пользователь кликнул, а чанк ещё грузится. Пятый — code splitting ради code splitting, без реальной пользы, когда режут то, что не нужно резать. Всё это влияет на Web Vitals: страдает LCP, FCP, TTI. Правильная стратегия — резать по роутам и фичам, не дробить слишком мелко, использовать preload и prefetch. На собеседовании Middle и Senior важно уметь балансировать. Полный разбор стратегий — в большом видео по ссылке под этим шортсом. #codesplitting #webvitals #frontend #frontendinterview #middle #senior #techinterview #codinginterview

, чтобы оставлять комментарии