Оптимізація часу збірки Vite: всеосяжний посібник

Vite — це сучасний інструмент для зборки, який швидко став одним із найпопулярніших виборів для фронтенд-розробки, особливо для React, Vue та інших JavaScript фреймворків.

Його швидкий сервер для розробки та оптимізований процес зборки роблять його відмінним вибором для багатьох проектів. Однак, коли ваш проект зростає, час зборки може почати збільшуватись, особливо під час продуктивних збірок.

У цій статті ми розглянемо кілька стратегій, які допоможуть оптимізувати час зборки Vite, від налаштувань конфігурації до використання плагінів та оптимізації вашої кодової бази.

1. Використовуйте вбудовані можливості Vite

a) Увімкнення опції build.target

Опція build.target дозволяє вказати, на які браузери ви орієнтуєтесь. За замовчуванням Vite орієнтується на сучасні браузери (ES модулі), але ви можете налаштувати це відповідно до потреб вашого проекту. Якщо ви орієнтуєтесь лише на сучасні браузери, ви можете скоротити час зборки, виключивши підтримку застарілих браузерів.

Ось приклад:

// vite.config.js  
export default {  
 build: {  
 target: 'esnext', // Орієнтуємось лише на сучасний JavaScript  
 },  
};

b) Вимкнення sourcemaps для продакшн

Генерація sourcemaps під час продуктивних збірок може сповільнити процес зборки. Якщо вам не потрібні sourcemaps у продакшн, ви можете вимкнути їх:

// vite.config.js  
export default {  
 build: {  
 sourcemap: false, // Вимкнення sourcemaps у продакшн  
 },  
};

c) Увімкнення minify та terserOptions

Vite використовує esbuild для мінімізації вашого коду. Хоча esbuild надзвичайно швидкий, ви можете покращити продуктивність зборки, налаштувавши параметри мінімізації для оптимізації виведення.

// vite.config.js  
export default {  
 build: {  
 minify: 'esbuild', // Увімкнення esbuild для мінімізації  
 terserOptions: {  
 compress: {  
 drop_console: true, // Видалення console.log для продакшн  
 },  
 },  
 },  
};

2. Розширене кешування та використання паралелізму

Однією з причин, чому Vite такий швидкий, є його агресивне використання кешування. Однак ви все ще можете додатково оптимізувати це, увімкнувши постійний кеш та паралелізуючи деякі задачі зборки.

a) Увімкнення постійного кешу

Vite кешує результати збірки, щоб уникнути перекомпіляції незмінених файлів. За замовчуванням кешування використовується, але ви можете забезпечити його збереження між збірками, увімкнувши його явно:

// vite.config.js  
export default {  
 build: {  
 cacheDir: '.vite', // Переконайтесь, що кеш зберігається в постійному місці  
 },  
};

b) Паралелізація задач зборки

Vite використовує esbuild всередині, який уже оптимізований для багатопотоковості. Якщо у вас є важкі плагіни чи трансформації, увімкнення паралелізму прискорить процес:

// vite.config.js  
export default {  
 plugins: [  
 // Приклад плагіна, який підтримує паралельну обробку  
 myPlugin({ parallel: true }),  
 ],  
};

3. Розділення коду та оптимізація бандлів

Розділення коду — це техніка для зменшення розміру ваших бандлів та покращення часу зборки. Vite підтримує автоматичне розділення коду з коробки, але ви можете налаштувати це додатково.

a) Використовуйте динамічні імпорти

Використовуючи динамічний import() для завантаження специфічних модулів, ви можете розділити ваш код на менші частини, які завантажуються за потребою. Це зменшує початковий розмір бандлу і може прискорити як час зборки, так і час завантаження.

// Приклад динамічного імпорту для розділення коду  
const SomeComponent = React.lazy(() => import('./SomeComponent'));jav

b) Налаштуйте ручне розділення коду — особисто я часто це використовую

Якщо вам потрібен більший контроль над тим, як ваш код розділяється, ви можете налаштувати ручні частини в Vite:

// vite.config.js  
export default {  
 build: {  
 rollupOptions: {  
 output: {  
 manualChunks(id) {  
 if (id.includes('node_modules')) {  
 return 'vendor';  
 }  
 },  
 },  
 },  
 },  
};

Це дозволяє вам розділяти сторонні залежності на окремі частини, що робить процес зборки ефективнішим.

4.

Використовуйте плагін vite для оптимізації зображень: vite-plugin-imagemin

Зображення можуть становити значну частину вашого кінцевого бандлу. Ви можете використовувати vite-plugin-imagemin для автоматичної оптимізації зображень під час процесу збірки, що зменшує як розмір вашого бандлу, так і час його збірки.

Встановіть плагін і змініть ваш файл vite.config.ts:

// vite.config.js  
import ViteImagemin from 'vite-plugin-imagemin';  

export default {  
 plugins: [ViteImagemin()],  
};

І на цьому все на сьогодні 🙂 Сподіваюся, що це було корисно. Дякую за прочитання!

Перекладено з: Optimize Vite Build Time: A Comprehensive Guide