Dominio
Frontend Development
Perfil de habilidad
Code splitting, tree shaking, lazy loading, dynamic imports
Roles
6
donde aparece esta habilidad
Niveles
5
ruta de crecimiento estructurada
Requisitos obligatorios
28
los otros 2 opcionales
Frontend Development
Web Performance
17/3/2026
Selecciona tu nivel actual y compara las expectativas.
La tabla muestra cómo crece la profundidad desde Junior hasta Principal.
| Rol | Obligatorio | Descripción |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Understands bundling for Electron: webpack/Vite configuration for main and renderer. Configures externals for Node.js built-ins. Measures bundle size through webpack-bundle-analyzer. | |
| Frontend Developer (Angular) | Obligatorio | Understands bundle size impact on Angular application performance. Uses ng build --configuration production for tree-shaking and minification. Analyzes bundles with source-map-explorer. |
| Frontend Developer (React) | Obligatorio | Understands the fundamentals of Bundle Optimization. Applies basic practices in daily work. Follows recommendations from the team and documentation. |
| Frontend Developer (Svelte) | Obligatorio | Understands the role of Vite and Rollup in SvelteKit application bundling, analyzes bundle size through rollup-plugin-visualizer. Applies basic optimizations: dynamic import() for lazy-loading routes, tree-shaking unused code from Svelte libraries. |
| Frontend Developer (Vue) | Obligatorio | Understands basic Vite bundling principles — entry points, chunks, tree shaking. Analyzes bundle size through vite-bundle-visualizer, applies dynamic import() for lazy loading Vue Router routes. |
| Fullstack Developer | Obligatorio | Understands bundling principles in fullstack applications and can analyze bundle size through webpack-bundle-analyzer. Applies basic optimizations: dynamic imports for code splitting, tree-shaking unused code, dependency optimization. |
| Rol | Obligatorio | Descripción |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Optimizes bundle through tree-shaking, code splitting, lazy imports. Configures native module bundling (node-loader). Minimizes Electron app size through asar exclude patterns. Uses esbuild for fast builds. | |
| Frontend Developer (Angular) | Obligatorio | Optimizes Angular application bundles: code splitting via lazy-loaded routes, dynamic imports for heavy libraries, analysis via webpack-bundle-analyzer, removing unused Angular modules and providers. |
| Frontend Developer (React) | Obligatorio | Optimizes React application bundle: configures chunk splitting in Vite for optimal caching, implements route-based code splitting in Next.js, tree-shaking for UI libraries. Configures bundle size limits in CI, analyzes and eliminates dependency duplication. |
| Frontend Developer (Svelte) | Obligatorio | Optimizes SvelteKit application bundle: configures code splitting by routes, manualChunks for vendor libraries, preload strategies. Minimizes CSS through Tailwind purge, analyzes dependency duplication, configures gzip/brotli compression on the server. |
| Frontend Developer (Vue) | Obligatorio | Optimizes Vue application bundle — configuring Vite rollupOptions for chunk splitting, manualChunks for vendor libraries. Configures code splitting by Nuxt 3 routes, optimizes Pinia store size through tree shaking. |
| Fullstack Developer | Obligatorio | Independently implements complex UI components with bundle optimization. Optimizes rendering performance. Writes tests. Applies for state management. |
| Rol | Obligatorio | Descripción |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Obligatorio | Designs build pipeline for Electron with multi-target compilation. Optimizes startup through V8 snapshot (electron-link). Implements incremental builds. Analyzes and optimizes dependency graph. |
| Frontend Developer (Angular) | Obligatorio | Designs bundle optimization strategy: granular code splitting via standalone components, secondary entry points for libraries, differential loading, preloading strategies (PreloadAllModules, custom). |
| Frontend Developer (React) | Obligatorio | Designs bundle optimization strategy for React applications: granular code splitting, prefetching through Speculation Rules API, module/nomodule approach. Introduces automated bundle size regression monitoring in CI, optimizes vendor chunks for long-term caching. |
| Frontend Developer (Svelte) | Obligatorio | Designs bundling strategy for large-scale SvelteKit applications: granular code splitting, module federation, edge optimizations. Creates custom Vite plugins for specific optimizations, implements differential loading and automatic performance budgets in CI. |
| Frontend Developer (Vue) | Obligatorio | Designs bundling strategy for large-scale Vue applications — granular chunks, prefetch hints, module federation. Analyzes and eliminates dependency duplication, optimizes Vite build through custom Rollup plugins. |
| Fullstack Developer | Obligatorio | Optimizes fullstack application bundles: code-splitting by routes and components, separate chunks for vendor code, SSR bundle optimization. Configures Vite/webpack for minimal size, implements prefetch strategies and analyzes server dependency impact. |
| Rol | Obligatorio | Descripción |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Obligatorio | Defines build and bundle strategy for the Electron team. Establishes size budgets. Coordinates build infrastructure. |
| Frontend Developer (Angular) | Obligatorio | Implements bundle size control: performance budgets in angular.json, CI checks via bundlesize, regression monitoring, import standards to prevent accidental bundle growth. |
| Frontend Developer (React) | Obligatorio | Standardizes bundle optimization approach in the team's React projects: per-route performance budgets, automatic PR comments with bundle diff, shared chunks in monorepo. Defines architectural patterns for minimizing JavaScript sent to the client. |
| Frontend Developer (Svelte) | Obligatorio | Defines bundle optimization standards for Svelte projects: size budgets, automatic checks, dependency review process. Implements bundle size monitoring in CI/CD, coordinates optimizations between teams, trains on efficient code splitting. |
| Frontend Developer (Vue) | Obligatorio | Defines performance budgets for organizational Vue project bundles — automated size checks in CI, growth alerting. Introduces optimization strategy — dependency audit, bundle analysis, automated size regression testing. |
| Fullstack Developer | Obligatorio | Designs bundling strategy for the fullstack platform: chunk architecture, shared dependencies in monorepo, lazy-loading strategy. Defines bundle size budgets, configures automated CI checks and optimizes shared client-server packages. |
| Rol | Obligatorio | Descripción |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Obligatorio | Shapes enterprise build standards for Electron. Evaluates build tools evolution (Vite, Turbopack, rspack). Defines build architecture. |
| Frontend Developer (Angular) | Obligatorio | Defines architectural decisions for minimal bundles at the platform level: micro-frontend strategy with shared dependencies, esbuild optimizations, tree-shakeable providers, polyfill strategy. |
| Frontend Developer (React) | Obligatorio | Defines bundle optimization strategy for the React application ecosystem: shared dependencies through Module Federation, optimal CDN strategies, resource loading architecture. Designs platform-level solutions for automatic bundle optimization across all products. |
| Frontend Developer (Svelte) | Obligatorio | Shapes code delivery optimization strategy at the organizational level, researches cutting-edge bundling approaches in Svelte 5. Influences SvelteKit Vite integration development, defines architectural decisions for minimizing runtime and maximizing compiler optimizations. |
| Frontend Developer (Vue) | Obligatorio | Shapes bundle optimization strategy for the company's Vue ecosystem — shared chunks between micro-frontends, CDN strategies, edge-side rendering. Researches and introduces new approaches — module preload, import maps, Rolldown. |
| Fullstack Developer | Obligatorio | Defines organizational bundle optimization strategy: size standards for fullstack applications, automated regression monitoring, micro-frontend architecture. Researches and adopts new approaches: Module Federation, streaming imports, edge bundling. |