Vue.js Assignment– 8

Performance Optimization

Basic Questions

  1. Install Vue DevTools and record a performance profile while typing into an input-bound list filter.
  2. Use Vue DevTools to find the component with the highest render time in a small app and list possible causes.
  3. Convert a large, rarely visited view to a lazy-loaded route using dynamic import.
  4. Lazy-load a non-route component (e.g., a chart) with defineAsyncComponent and show a fallback loader.
  5. Split your app into at least two route chunks and verify chunk files in the browser Network tab.
  6. Enable code splitting for multiple feature modules and confirm separate chunk names via comments.
  7. Replace a heavy third-party library with a lighter alternative and measure bundle size change.
  8. Implement debounce on a search input to delay filtering until the user stops typing.
  9. Implement throttle on a scroll handler to limit updates to once every 200ms.
  10. Memoize an expensive computed result using computed() and demonstrate fewer recalculations.
  11. Add v-memo (Vue 3.2+) to skip re-render of a static subtree and verify in DevTools.
  12. Use key correctly in a list to avoid unnecessary DOM replacements.
  13. Mark a large non-reactive object with markRaw() and show that it no longer triggers updates.
  14. Convert a reactive image cache to shallowRef() and measure fewer deep reactive traversals.
  15. Use route-level prefetch hints for a soon-to-be-visited view and observe network activity.
  16. Remove unused components and verify tree shaking by inspecting the build report.
  17. Add defineProps/defineEmits (script setup) and remove runtime prop validation overhead.
  18. Swap synchronous heavy work for a microtask (nextTick) to keep the UI responsive.
  19. Replace inline arrow functions in templates with methods to reduce VDOM diff cost.
  20. Capture a second Vue DevTools profile to compare before/after improvements.

Intermediate Questions

  1. Build a virtual scrolling list for 10,000 items using a virtualization library and ensure smooth scrolling.
  2. Implement a manual windowed list with only visible rows rendered; measure render count vs full list.
  3. Add route-based prefetch + preload strategies and compare first interaction latency.
  4. Extract a frequently changing subcomponent into a separate component to reduce parent re-renders.
  5. Convert a synchronous filter/sort on a large array to a Web Worker and show main-thread relief.
  6. Implement route-level lazy hydration: render markup, then hydrate on interaction.
  7. Create a dynamic import for a heavy charting library only when the chart tab is selected.
  8. Use teleport to move a modal outside a large list container and measure reflow improvements.
  9. Add requestIdleCallback or setTimeout(0) batching for non-critical updates.
  10. Implement a cache for API responses (SWR: stale-while-revalidate) and show faster repeat navigation.
  11. Profile a component with watchEffect vs targeted watch and switch to the cheaper variant.
  12. Refactor a deep reactive object to normalized structures (by id) to minimize updates.
  13. Use suspense with async components and a lightweight skeleton to avoid layout jank.
  14. Create a custom useThrottleFn and useDebounceFn composable; unit-test timing behavior.
  15. Add route chunk splitting per feature (dashboard, reports, settings) and verify via build stats.
  16. Reduce bundle size by externalizing CDN-provided libraries and compare Lighthouse scores.
  17. Replace large SVG icon set with a tree-shaken icon component that imports only used icons.
  18. Implement image optimization (srcset, lazy loading, compression) and measure LCP improvement.
  19. Add a compile-time flag to remove dev-only logs/branches from production build.
  20. Use a build analyzer (e.g., rollup-plugin-visualizer/webpack-bundle-analyzer) and document top offenders with action items.

Advanced Questions

  1. Build a performance budget (max bundle size, max long task time) and fail CI if exceeded.
  2. Implement islands architecture (partial hydration) for a page with multiple interactive widgets.
  3. Create a virtualized grid (rows × columns) with sticky headers and measure scroll FPS.
  4. Add a priority scheduler for state updates (high for input, low for analytics) using queues and microtasks.
  5. Implement intelligent memoization for expensive computed chains with dependency hashing.
  6. Build a progressive data loader: stream paginated data, render incrementally, and keep UI interactive.
  7. Create an auto-chunking strategy: split routes by user role and locale; verify chunk reuse across paths.
  8. Introduce component-level caching (keep-alive with include/exclude) and measure navigation speedups.
  9. Orchestrate a full performance audit: profiling, bundle analysis, RUM metrics (TTI, LCP), and implement a remediation plan with before/after charts.
  10. Final Hands-on Project:
    • Profile a medium Vue app and identify 5 bottlenecks
    • Apply lazy loading for routes/components + tree shaking
    • Implement virtual scrolling for large datasets
    • Add debounce/throttle/memoization where appropriate
    • Externalize heavy libs, optimize images, and tune reactivity (markRaw/shallowRef)
    • Enforce budgets in CI and ship a report detailing quantitative gains (bundle size, FPS, LCP).