Домен
Frontend Development
Профиль навыка
Code splitting, tree shaking, lazy loading, dynamic imports
Ролей
6
где встречается этот навык
Грейдов
5
сформированная дорожка роста
Обязательных требований
28
ещё 2 — необязательные
Frontend Development
Web Performance
17.03.2026
Выберите текущий грейд и сравните ожидания. Карточки ниже покажут, что нужно закрыть для следующего уровня.
Таблица показывает, как меняется глубина владения навыком от Junior до Principal.
| Роль | Обязательность | Описание |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Понимает бандлинг для Electron: webpack/Vite конфигурация для main и renderer. Настраивает externals для Node.js built-ins. Измеряет размер бандла через webpack-bundle-analyzer. | |
| Frontend Developer (Angular) | Обязателен | Понимает влияние размера бандла на производительность Angular-приложения. Использует ng build --configuration production для tree-shaking и минификации. Анализирует бандл через source-map-explorer. |
| Frontend Developer (React) | Обязателен | Понимает основы bundle optimization в React/Vite проектах: code splitting через React.lazy и Suspense, dynamic imports для тяжёлых библиотек. Анализирует bundle size через vite-plugin-visualizer, избегает импорта целых библиотек (lodash vs lodash-es). |
| Frontend Developer (Svelte) | Обязателен | Понимает роль Vite и Rollup в бандлинге SvelteKit-приложений, анализирует размер бандла через rollup-plugin-visualizer. Применяет базовые оптимизации: dynamic import() для ленивой загрузки маршрутов, tree-shaking неиспользуемого кода из Svelte-библиотек. |
| Frontend Developer (Vue) | Обязателен | Понимает базовые принципы бандлинга Vite — entry points, chunks, tree shaking. Анализирует размер бандла через vite-bundle-visualizer, применяет динамические import() для ленивой загрузки роутов Vue Router. |
| Fullstack Developer | Обязателен | Понимает принципы бандлинга в fullstack-приложениях и умеет анализировать размер бандла через webpack-bundle-analyzer. Применяет базовые оптимизации: динамический импорт для code-splitting, tree-shaking неиспользуемого кода, оптимизация зависимостей. |
| Роль | Обязательность | Описание |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Оптимизирует бандл через tree-shaking, code splitting, lazy imports. Настраивает native module bundling (node-loader). Минимизирует Electron app size через asar exclude patterns. Использует esbuild для fast builds. | |
| Frontend Developer (Angular) | Обязателен | Оптимизирует бандл Angular-приложения: code splitting через lazy-loaded routes, dynamic imports для тяжёлых библиотек, анализ через webpack-bundle-analyzer, удаление неиспользуемых Angular-модулей и провайдеров. |
| Frontend Developer (React) | Обязателен | Оптимизирует бандл React-приложения: настраивает chunk splitting в Vite для оптимального кеширования, реализует route-based code splitting в Next.js, tree-shaking для UI-библиотек. Настраивает bundle size limits в CI, анализирует и устраняет дублирование зависимостей. |
| Frontend Developer (Svelte) | Обязателен | Оптимизирует бандл SvelteKit-приложения: настраивает code splitting по маршрутам, manualChunks для vendor-библиотек, preload стратегии. Минимизирует CSS через Tailwind purge, анализирует дублирование зависимостей, настраивает gzip/brotli сжатие на сервере. |
| Frontend Developer (Vue) | Обязателен | Оптимизирует бандл Vue-приложения — настройка Vite rollupOptions для chunk splitting, manualChunks для vendor-библиотек. Настраивает code splitting по роутам Nuxt 3, оптимизирует размер Pinia-сторов через tree shaking. |
| Fullstack Developer | Обязателен | Самостоятельно реализует сложные UI-компоненты с Оптимизация бандла. Оптимизирует производительность рендеринга. Пишет тесты. Применяет для state management. |
| Роль | Обязательность | Описание |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Обязателен | Проектирует build pipeline для Electron с multi-target compilation. Оптимизирует startup через V8 snapshot (electron-link). Реализует incremental builds. Анализирует и оптимизирует dependency graph. |
| Frontend Developer (Angular) | Обязателен | Проектирует стратегию оптимизации бандла: гранулярный code splitting через standalone-компоненты, secondary entry points для библиотек, differential loading, preloading strategies (PreloadAllModules, custom). |
| Frontend Developer (React) | Обязателен | Проектирует стратегию bundle optimization для React-приложений: гранулярный code splitting, prefetching через Speculation Rules API, module/nomodule подход. Внедряет автоматический мониторинг bundle size regression в CI, оптимизирует vendor chunks для длительного кеширования. |
| Frontend Developer (Svelte) | Обязателен | Проектирует стратегию бандлинга для масштабных SvelteKit-приложений: гранулярный code splitting, module federation, edge-оптимизации. Создаёт custom Vite-плагины для специфичных оптимизаций, реализует differential loading и автоматические performance budgets в CI. |
| Frontend Developer (Vue) | Обязателен | Проектирует стратегию бандлинга для масштабных Vue-приложений — granular chunks, prefetch hints, module federation. Анализирует и устраняет дублирование зависимостей, оптимизирует Vite build через custom Rollup плагины. |
| Fullstack Developer | Обязателен | Оптимизирует бандлы fullstack-приложений: code-splitting по роутам и компонентам, отдельные чанки для vendor-кода, оптимизация SSR-бандла. Настраивает Vite/webpack для минимального размера, внедряет prefetch-стратегии и анализирует влияние серверных зависимостей. |
| Роль | Обязательность | Описание |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Обязателен | Определяет build и bundle стратегию для Electron-команды. Формирует size budgets. Координирует build infrastructure. |
| Frontend Developer (Angular) | Обязателен | Внедряет систему контроля размера бандла: performance-бюджеты в angular.json, CI-проверки через bundlesize, мониторинг регрессий, стандарты импортов для предотвращения случайного увеличения бандла. |
| Frontend Developer (React) | Обязателен | Стандартизирует подход к bundle optimization в React-проектах команды: performance budgets per route, автоматические PR-комментарии с bundle diff, shared чанки в монорепо. Определяет архитектурные паттерны для минимизации JavaScript, отправляемого клиенту. |
| Frontend Developer (Svelte) | Обязателен | Определяет стандарты оптимизации бандлов для Svelte-проектов: бюджеты размеров, автоматические проверки, процесс dependency review. Внедряет мониторинг размера бандлов в CI/CD, координирует оптимизации между командами, обучает эффективному code splitting. |
| Frontend Developer (Vue) | Обязателен | Определяет performance budgets для бандлов Vue-проектов организации — автоматические проверки размера в CI, алертинг на рост. Внедряет стратегию оптимизации — dependency audit, bundle analysis, automated size regression testing. |
| Fullstack Developer | Обязателен | Проектирует стратегию бандлинга для fullstack-платформы: архитектура чанков, shared-зависимости в монорепо, lazy-loading стратегия. Определяет бюджеты размера бандлов, настраивает автоматические проверки в CI и оптимизирует общие пакеты клиента и сервера. |
| Роль | Обязательность | Описание |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Обязателен | Формирует enterprise build стандарты для Electron. Оценивает build tools evolution (Vite, Turbopack, rspack). Определяет build architecture. |
| Frontend Developer (Angular) | Обязателен | Определяет архитектурные решения для минимального бандла на уровне платформы: micro-frontend стратегия с shared dependencies, esbuild-оптимизации, tree-shakeable провайдеры, стратегия полифиллов. |
| Frontend Developer (React) | Обязателен | Определяет стратегию bundle optimization для экосистемы React-приложений: shared dependencies через Module Federation, оптимальные CDN-стратегии, архитектуру загрузки ресурсов. Проектирует platform-level решения для автоматической оптимизации бандлов во всех продуктах. |
| Frontend Developer (Svelte) | Обязателен | Формирует стратегию оптимизации поставки кода на уровне организации, исследует передовые подходы к бандлингу в Svelte 5. Влияет на развитие Vite-интеграции SvelteKit, определяет архитектурные решения для минимизации runtime и максимизации компиляторных оптимизаций. |
| Frontend Developer (Vue) | Обязателен | Формирует стратегию оптимизации бандлов для Vue-экосистемы компании — shared chunks между микрофронтендами, CDN-стратегии, edge-side rendering. Исследует и внедряет новые подходы — module preload, import maps, Rolldown. |
| Fullstack Developer | Обязателен | Определяет стратегию оптимизации бандлов организации: стандарты размера для fullstack-приложений, автоматический мониторинг регрессий, micro-frontend архитектура. Исследует и внедряет новые подходы: Module Federation, streaming imports, edge-бандлинг. |