🚫 Problem: Big Bundles, Slow First Loads
Modern apps ship huge bundles. Tools like Vite and Webpack support code splitting, but it’s often underused.
Here’s how we dropped initial JS size by 40% by lazy-loading non-critical UI in Vite.
✅ Solution: Dynamic Import + React.lazy
Assume we have a heavy component:
export default function Chart() {
// big lib like recharts, visx, or d3
return <div>Heavy Chart</div>;
}
Instead of importing normally:
import Chart from "./Chart"
Use React.lazy:
const Chart = React.lazy(() => import(./Chart));
Wrap it with <suspense>:
📊 Result
- Initial load time down ~40% on mobile
- Less JS execution blocking Time to Interactive
- Better Lighthouse scores
🧪 Vite Handle the Split
In Vite, you’ll now see Chart.[hash].js as separate chunk. Automatically lazy-loaded when needed.
dist/
├── index.html
├── assets/
│ ├── main.[hash].js
│ └── Chart.[hash].js ← ✅ Lazy-loaded!
🔧 Bonus Tips
- Group multiple lazy components with
import()+Promise.all - Always provide a
<fallback>for UX - Profile with DevTools -> Network tab -> disable cache -> reload
🧠 Takeaway
If your app feels bloated – don’t refactor the whole thing. Just start lazy-loading where it hurts most.
sperez927 | Sciencx (2025-06-03T14:49:47+00:00) Slice Your JS: Lazy Load Components with React + Vite + Dynamic Imports. Retrieved from https://www.scien.cx/2025/06/03/slice-your-js-lazy-load-components-with-react-vite-dynamic-imports/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.