Разделение кода и ленивая загрузка для быстрого фронтенда

Дай практические советы по повышению производительности веб-сайта за счет разделения кода и ленивой загрузки JavaScript-модулей. Ответ ориентируй на фронтенд-разработчиков с базовым или средним опытом. Пиши на русском языке, прикладно и без лишней теории.

Используй разделы с такими заголовками:
- Краткое объяснение
- Преимущества
- Подходы и стратегии
- Примеры кода
- Лучшие практики
- Инструменты и метрики
- Подводные камни и их устранение

Обязательные требования:
- В разделе "Подходы и стратегии" объясни route-level splitting, component или feature-level splitting, vendor splitting, динамическую загрузку по событию или прокрутке через IntersectionObserver, preload и prefetch, а также взаимодействие с SSR и гидратацией.
- В разделе "Примеры кода" приведи короткие рабочие примеры с кратким комментарием для: dynamic import в vanilla JS, Webpack с комментарием webpackChunkName, React.lazy + Suspense и при необходимости Next.js dynamic import, Vue defineAsyncComponent и ленивой инициализации через IntersectionObserver.
- В "Лучших практиках" перечисли правила по именованию чанков, кешированию, балансу между размером и количеством чанков, обработке ошибок динамической загрузки и fallback UI.
- В "Инструментах и метриках" укажи Lighthouse, WebPageTest, DevTools, coverage, network, bundle analyzer и объясни, на какие показатели смотреть: TTFB, FCP, LCP, TTI, число и размер запросов.
- В "Подводных камнях" перечисли распространенные ошибки: чрезмерное дробление, проблемы HTTP/1, дублирование зависимостей, сложности с SSR и SEO, ошибки кеширования, и сразу дай способы предотвращения.

Ограничения:
- Общий объем 700-1000 слов.
- Кодовые примеры должны быть короткими и понятными.
- Не задавай вопросов и не добавляй ничего вне указанных разделов.