В этой статье хочу рассказать об одном из многих улучшений производительности страницы. Представим, что в проекте используется тяжёлая библиотека для генерации PDF:

import { jsPDF } from 'jspdf';

Даже если пользователь никогда не нажмёт кнопку «Скачать PDF», библиотека попадёт в JavaScript-бандл страницы.

Решение: динамический импорт. Можно загрузить библиотеку только после действия пользователя:

export const DownloadPdfButton = () => {

const [isLoading, setIsLoading] = useState(false);

const handleDownload = async () => {     try {       setIsLoading(true);

const { jsPDF } = await import('jspdf');

const document = new jsPDF();

document.text('Hello world', 10, 10);       document.save('document.pdf');     } finally {       setIsLoading(false);     }   };

return (     <button disabled={isLoading} onClick={handleDownload}>       {isLoading ? 'Подготовка PDF...' : 'Скачать PDF'}     </button>   ); };

Во время сборки Vite обнаружит динамический import() и создаст отдельный чанк.

Условно результат сборки будет выглядеть так: dist/assets/index-a7d31.js dist/assets/jspdf-f91c2.js

Основной бандл больше не содержит код jspdf.