Domäne
Frontend Development
Skill-Profil
Code splitting, tree shaking, lazy loading, dynamic imports
Rollen
6
wo dieser Skill vorkommt
Stufen
5
strukturierter Entwicklungspfad
Pflichtanforderungen
28
die anderen 2 optional
Frontend Development
Web Performance
17.3.2026
Wählen Sie Ihr aktuelles Level und vergleichen Sie die Erwartungen.
Die Tabelle zeigt, wie die Tiefe von Junior bis Principal wächst.
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| 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) | Pflicht | 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) | Pflicht | Understands the fundamentals of Bundle Optimization. Applies basic practices in daily work. Follows recommendations from the team and documentation. |
| Frontend Developer (Svelte) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | Independently implements complex UI components with bundle optimization. Optimizes rendering performance. Writes tests. Applies for state management. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Pflicht | 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) | Pflicht | Designs bundle optimization strategy: granular code splitting via standalone components, secondary entry points for libraries, differential loading, preloading strategies (PreloadAllModules, custom). |
| Frontend Developer (React) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Pflicht | Defines build and bundle strategy for the Electron team. Establishes size budgets. Coordinates build infrastructure. |
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Desktop Developer (Electron/Tauri) | Pflicht | Shapes enterprise build standards for Electron. Evaluates build tools evolution (Vite, Turbopack, rspack). Defines build architecture. |
| Frontend Developer (Angular) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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) | Pflicht | 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 | Pflicht | 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. |