Bundle boyutunu nasıl analiz eder ve küçültürsünüz?

Analiz:

• @next/bundle-analyzer, webpack-bundle-analyzer veya vite-bundle-visualizer ile hangi paketin ne kadar yer kapladığını görsel olarak incelemek
• bundlephobia.com ile bir paketi eklemeden önce boyutunu kontrol etmek

Küçültme:

• Dinamik import ile ağır ve nadir kullanılan modülleri ayrı parçaya almak
• Tree shaking'e uygun içe aktarma: import { debounce } from "lodash-es" (tüm lodash yerine)
• Ağır paketleri hafif alternatiflerle değiştirmek: moment → date-fns / dayjs
• Polyfill'leri yalnızca gereken tarayıcılara göndermek
• Kullanılmayan bağımlılıkları kaldırmak
• React Server Components ile sunucuda kalabilecek kodu tarayıcıya hiç göndermemek