Сократите стартовый бандл, перенеся тяжёлые зависимости в динамический

import(): await import('./chart.js') - вызывается только при открытии нужного блока.

Webpack/Vite автоматически вынесет код в отдельный чанκ, ускорив First Paint и снизив initial payload.

#javascript #фишки #performance #frontend

Отменяйте «устаревшие» запросы при живом поиске: AbortController защищает от гонок (когда медленный ответ перезаписывает свежие данные) и экономит трафик.

let controller;
async function search(query) {
controller?.abort(); // отменяем предыдущий
controller = new AbortController();
try {
const res = await fetch('/api/search?q=' + encodeURIComponent(query), { signal: controller.signal });
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
renderResults(data);
} catch (e) {
if (e.name !== 'AbortError') showError(e); // игнорируем отмену
}
}

Советы: добавьте debounce ввода (≈150–300 мс), при необходимости ставьте таймаут (setTimeout(() => controller.abort(), 8000)) и очищайте его в finally. В React храните контроллер в useRef и отменяйте в cleanup эффекта.

#фишки #javascript #frontend #performance #гайды