M
MLOG
Оптимізація продуктивності React: Як досконало зменшити розмір бандла | MLOG | MLOG

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

2. "Струшування дерева" (Tree Shaking)

Tree shaking — це техніка, яка усуває "мертвий код" з вашого застосунку. Мертвий код — це код, який ніколи не використовується у вашому застосунку, але все одно включається до бандла. Це часто трапляється, коли ви імпортуєте цілі бібліотеки, але використовуєте лише невелику частину їх функціоналу.

Сучасні бандлери JavaScript, такі як Webpack та Rollup, можуть автоматично виконувати tree shaking. Щоб забезпечити ефективну роботу tree shaking, важливо використовувати ES-модулі (синтаксис import та export) замість CommonJS (синтаксис require). ES-модулі дозволяють бандлеру статично аналізувати ваш код і визначати, які експорти насправді використовуються.

Приклад:

Припустимо, ви використовуєте утилітарну бібліотеку lodash. Замість того, щоб імпортувати всю бібліотеку:

            import _ from 'lodash';

_.map([1, 2, 3], (n) => n * 2);

Імпортуйте лише ті функції, які вам потрібні:

            import map from 'lodash/map';

map([1, 2, 3], (n) => n * 2);

Це гарантує, що до вашого бандла буде включено лише функцію map, що значно зменшує його розмір.

3. Динамічні імпорти

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

Приклад:

            async function handleClick() {
  const module = await import('./MyLargeComponent');
  const MyLargeComponent = module.default;
  // Use MyLargeComponent
}

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

4. Мініфікація та стиснення

Мініфікація видаляє непотрібні символи з вашого коду, такі як пробіли, коментарі та невикористані змінні. Стиснення зменшує розмір вашого коду, застосовуючи алгоритми, які знаходять патерни та представляють їх більш ефективно.

Більшість сучасних інструментів збірки, таких як Webpack, Parcel та Rollup, мають вбудовану підтримку мініфікації та стиснення. Наприклад, Webpack використовує Terser для мініфікації і може бути налаштований на використання Gzip або Brotli для стиснення.

Приклад (конфігурація Webpack):

            const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

Ця конфігурація вмикає мініфікацію за допомогою Terser та стиснення за допомогою Gzip. Опція threshold визначає мінімальний розмір (у байтах) файлу для стиснення.

5. Оптимізація зображень

Зображення часто можуть бути значним внеском у розмір бандла вашого застосунку. Оптимізація зображень може кардинально покращити продуктивність.

Техніки оптимізації зображень:

6. Розумно обирайте бібліотеки

Ретельно оцінюйте бібліотеки, які ви використовуєте у своєму застосунку. Деякі бібліотеки можуть бути досить великими, навіть якщо ви використовуєте лише невелику частину їх функціоналу. Розгляньте можливість використання менших, більш сфокусованих бібліотек, які надають лише необхідні вам функції.

Приклад:

Замість використання великої бібліотеки для форматування дат, як-от Moment.js, розгляньте можливість використання меншої альтернативи, наприклад, date-fns або Day.js. Ці бібліотеки значно менші за розміром і надають схожий функціонал.

Порівняння розміру бандла:

7. HTTP/2

HTTP/2 — це новіша версія протоколу HTTP, яка пропонує кілька покращень продуктивності порівняно з HTTP/1.1, зокрема:

Увімкнення HTTP/2 на вашому сервері може значно покращити продуктивність вашого React-застосунку, особливо при роботі з великою кількістю невеликих файлів. Більшість сучасних веб-серверів та CDN підтримують HTTP/2.

8. Кешування в браузері

Кешування в браузері дозволяє браузерам зберігати статичні активи (наприклад, зображення, файли JavaScript та CSS) локально. Коли користувач повторно відвідує ваш застосунок, браузер може отримати ці активи з кешу замість того, щоб завантажувати їх знову, що значно скорочує час завантаження.

Налаштуйте ваш сервер так, щоб він встановлював відповідні заголовки кешування для ваших статичних активів. Заголовок Cache-Control є найважливішим. Він дозволяє вказати, як довго браузер повинен кешувати актив.

Приклад:

            Cache-Control: public, max-age=31536000

Цей заголовок повідомляє браузеру кешувати актив протягом одного року.

9. Рендеринг на стороні сервера (SSR)

Рендеринг на стороні сервера (SSR) передбачає рендеринг ваших React-компонентів на сервері та надсилання початкового HTML-коду клієнту. Це може покращити початковий час завантаження та SEO, оскільки пошукові системи можуть легко сканувати HTML-вміст.

Такі фреймворки, як Next.js та Gatsby, полегшують впровадження SSR у ваших React-застосунках.

Переваги SSR:

  • Покращений початковий час завантаження: Браузер отримує попередньо відрендерений HTML, що дозволяє йому швидше відображати контент.
  • Краще SEO: Пошукові системи можуть легко сканувати HTML-вміст, покращуючи рейтинг вашого застосунку в пошуковій видачі.
  • Покращений користувацький досвід: Користувачі бачать контент швидше, що призводить до більш захоплюючого досвіду.

    • 10. Мемоізація

    Мемоізація — це техніка кешування результатів дорогих викликів функцій та їх повторного використання, коли ті ж самі вхідні дані з'являються знову. У React ви можете використовувати компонент вищого порядку React.memo() для мемоізації функціональних компонентів. Це запобігає непотрібним повторним рендерингам, коли пропси компонента не змінилися.

    Приклад:

                import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Render component
  return 
    {props.data}
    ;
});

export default MyComponent;

    У цьому прикладі MyComponent буде повторно рендеритися, лише якщо зміниться проп props.data. Ви також можете надати власну функцію порівняння для React.memo(), якщо вам потрібен більший контроль над тим, коли компонент повинен повторно рендеритися.

    Реальні приклади та міжнародні аспекти

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

    Інструменти та ресурси

    Ось кілька корисних інструментів та ресурсів для зменшення розміру бандла:

    Висновок

    Зменшення розміру бандла — це безперервний процес, який вимагає ретельної уваги до деталей. Впроваджуючи техніки, описані в цьому посібнику, ви можете значно покращити продуктивність вашого React-застосунку та забезпечити кращий користувацький досвід. Не забувайте регулярно аналізувати розмір вашого бандла та виявляти області для оптимізації. Переваги меншого бандла — швидший час завантаження, покращена залученість користувачів та кращий загальний досвід — варті докладених зусиль.

    Оскільки практики веб-розробки продовжують розвиватися, залишатися в курсі найновіших технік та інструментів для зменшення розміру бандла є вирішальним для створення високопродуктивних React-застосунків, що відповідають вимогам глобальної аудиторії.