## Практична стратегія оптимізації bundle ### Крок 1: виміряти Не оптимізуй навмання. Спочатку запусти: ```bash bun run build ``` Потім analyzer: ```bash ANALYZE=true bun run build ``` Подивись, які сторінки мають найбільший JS. --- ### Крок 2: знайти важкі залежності Типові кандидати: ```txt moment lodash chart.js monaco-editor firebase mapbox stripe three.js framer-motion rich text editors syntax highlighters ``` Питання, яке треба поставити: > Чи потрібна ця бібліотека на initial load? Якщо ні - виносимо через dynamic import. --- ### Крок 3: перевірити імпорти Погано: ```ts import * as Icons from 'lucide-react'; ``` Краще: ```ts import { Search, User, Settings } from 'lucide-react'; ``` Погано: ```ts import { everything } from '@/lib/big-utils'; ``` Краще: ```ts import { formatPrice } from '@/lib/format-price'; ``` --- ### Крок 4: відкласти неважливе Наприклад, чат-віджет не повинен блокувати перший рендер сторінки. ```tsx import Script from 'next/script'; // ...

JavaScript bundle optimization

JavaScript bundle optimization