Practice & Assessment
Test your understanding of JavaScript Performance
Multiple Choice Questions
5Why is JavaScript more expensive per kilobyte than images for page performance?
Which import style enables tree shaking by a bundler?
What is the minimum task duration that qualifies as a 'long task' on the main thread?
What does `/* webpackPrefetch: true */` in a dynamic import comment do?
Which approach is most appropriate for offloading a 2-second JSON parsing operation triggered by a button click?
Coding Challenges
1Code-split a React app by route
Given a React app (provided) with three routes — Home, Dashboard, and Profile — all statically imported in App.jsx, refactor it to use React.lazy() and dynamic import() for the Dashboard and Profile pages. Wrap routes in a Suspense boundary with a loading fallback. Build the app and verify in the dist/ folder that separate chunk files exist for Dashboard and Profile. Input: provided App.jsx and three page components. Output: refactored App.jsx and a screenshot of the dist/ folder showing separate chunk files. Estimated time: 20–25 minutes.
Mini Project
Bundle Audit and Optimization Report
Take the provided React app (intentionally bloated with moment.js, full lodash, and a 200KB unused data library). Your task: (1) install rollup-plugin-visualizer and capture a before screenshot of the treemap, (2) replace moment.js with day.js using the same API calls, (3) replace lodash with lodash-es named imports, (4) remove the unused data library, (5) add route-based code splitting with React.lazy on at least 2 routes, (6) build again and capture an after treemap screenshot, (7) document the before/after gzipped bundle size for each change. Deliverable: refactored src/ files, before/after treemap screenshots, and a Markdown table showing size savings per change.