zahid ansari
Building scalable systems by applying mental models to code and architecture.
Website
Install this app to stay connected and in the loop.
Building meaningful experiences one pixel at a time 😉.
Made with by Zahid
views
Share
Is your First Contentful Paint suffering? I analyzed my bundle and shaved off 60% of JS payload. Here's how.
We love React because of its ecosystem, but importing heavy libraries can silently kill your performance.
My portfolio score on Lighthouse dropped to 65. The "Time to Interactive" was 4 seconds. I hadn't realized that importing a single icon from a large library or a heavy date formatter was bloating the entire initial load.
I used
1@next/bundle-analyzerHeavy components (like a Map or a large Chart) shouldn't load until they are needed or visible.
1import dynamic from 'next/dynamic';
2
3// This component won't poison the initial bundle
4const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
5 loading: () => <p>Loading Chart...</p>,
6 ssr: false // If it relies on window/browser APIs
7});
8
9export default function Analytics() {
10 return (
11 <div>
12 <h1>Stats</h1>
13 <HeavyChart />
14 </div>
15 )
16}Bad:
1import { format } from 'date-fns'; // Often tree-shakes well, but verify!
2import * as Lodash from 'lodash'; // Imports EVERYTHING ❌Good:
1import format from 'date-fns/format';
2import debounce from 'lodash/debounce'; // Import specific function ✅Mistake 1: Optimization before measurement.
Mistake 2: Large Lottie Files.
1.lottie1next/font1next/imagePerformance isn't a one-time fix; it's a habit. Keep an eye on your bundle size with every PR.
Tech Stack: Next.js, Webpack, Lighthouse