--- createdAt: 2025-11-25 updatedAt: 2025-11-25 title: Оптимізація розміру бандла та продуктивності i18n description: Зменшіть розмір бандла застосунку, оптимізуючи контент інтернаціоналізації (i18n). Дізнайтесь, як використовувати tree shaking та lazy loading для словників з Intlayer. keywords: - Оптимізація bundle - Автоматизація контенту - Динамічний контент - Intlayer - Next.js - JavaScript - React slugs: - doc - concept - bundle-optimization history: - version: 6.0.0 date: 2025-11-25 changes: Init history --- # Оптимізація розміру бандла та продуктивності i18n Одна з найпоширеніших проблем традиційних i18n-рішень, що базуються на JSON-файлах — це керування розміром контенту. Якщо розробники не розділяють контент вручну по неймспейсах, користувачі часто в кінцевому підсумку завантажують переклади для всіх сторінок і, можливо, для всіх мов лише для перегляду однієї сторінки. Наприклад, застосунок з 10 сторінками, перекладеними на 10 мов, може призвести до того, що користувач завантажує контент 100 сторінок, хоча йому потрібна лише **одна** (поточна сторінка поточною мовою). Це призводить до марної витрати трафіку та повільнішого завантаження. > Щоб виявити це, ви можете використовувати аналізатор бандлу, такий як `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js) або `webpack-bundle-analyzer` (React CRA / Angular / тощо). **Intlayer вирішує цю проблему через оптимізацію під час збірки.** Він аналізує ваш код, щоб визначити, які словники фактично використовуються для кожного компонента, і повторно вбудовує в бандл лише необхідний вміст. ## Зміст ## Як це працює Intlayer використовує **підхід на рівні компонентів**. На відміну від глобальних JSON-файлів, ваш вміст визначається поруч із компонентами або всередині них. Під час процесу збірки Intlayer: 1. **Аналізує** ваш код, щоб знайти виклики `useIntlayer`. 2. **Формує** відповідний вміст словників. 3. **Замінює** виклик `useIntlayer` на оптимізований код відповідно до вашої конфігурації. Це гарантує, що: - Якщо компонент не імпортується, його вміст не включається до бандла (видалення мертвого коду — Dead Code Elimination). - Якщо компонент завантажується lazy-loaded, його вміст також завантажується lazy-loaded. ## Налаштування за платформою ### Next.js Next.js вимагає плагін `@intlayer/swc` для обробки трансформації, оскільки Next.js використовує SWC для збірок. > Цей плагін встановлено за замовчуванням, оскільки SWC-плагіни досі експериментальні для Next.js. Це може змінитися в майбутньому. ### Vite Vite використовує плагін `@intlayer/babel`, який включений як залежність `vite-intlayer`. Оптимізація увімкнена за замовчуванням. ### Webpack Щоб увімкнути оптимізацію бандла з Intlayer на Webpack, потрібно встановити та налаштувати відповідний плагін Babel (`@intlayer/babel`) або SWC (`@intlayer/swc`). ### Expo / Lynx Оптимізація бандла **ще недоступна** для цієї платформи. Підтримка буде додана в майбутньому релізі. ## Конфігурація Ви можете контролювати, як Intlayer оптимізує ваш бандл через властивість `build` у файлі `intlayer.config.ts`. ```typescript fileName="intlayer.config.ts" import { Locales, type IntlayerConfig } from "intlayer"; const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH], defaultLocale: Locales.ENGLISH, }, build: { optimize: true, importMode: "static", // або 'dynamic' traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"], }, }; export default config; ``` > У більшості випадків рекомендовано залишати опцію `optimize` за замовчуванням. > Див. документацію з конфігурації для більш детальної інформації: [Конфігурація](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md) ### Параметри збірки Наступні параметри доступні в об'єкті конфігурації `build`: | Властивість | Тип | Значення за замовчуванням | Опис | | :-------------------- | :------------------------------ | :------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`optimize`** | `boolean` | `undefined` | Керує тим, чи увімкнена оптимізація під час збірки. Якщо `true`, Intlayer замінює виклики словників на оптимізовані інжекти. Якщо `false`, оптимізація вимкнена. Рекомендовано встановлювати `true` у production. | | **`importMode`** | `'static' , 'dynamic' , 'live'` | `'static'` | Визначає, як завантажуються словники (див. деталі нижче). | | **`traversePattern`** | `string[]` | `['**/*.{js,ts,jsx,tsx}', ...]` | Glob-шаблони, що визначають, які файли Intlayer має сканувати для оптимізації. Використовуйте це, щоб виключати несуміжні файли та прискорити збірку. | | **`outputFormat`** | `'esm', 'cjs'` | `'esm', 'cjs'` | Керує форматом згенерованих словників. | ## Режими імпорту Налаштування `importMode` визначає, як вміст словника вставляється у ваш компонент. ### 1. Статичний режим (`default`) У статичному режимі Intlayer замінює `useIntlayer` на `useDictionary` і вбудовує словник безпосередньо в JavaScript-бандл. - **Переваги:** Миттєвий рендеринг (синхронно), відсутність додаткових мережевих запитів під час гідратації. - **Недоліки:** Бандл містить переклади для **усіх** доступних мов для цього конкретного компонента. - **Найкраще для:** односторінкових додатків (SPA). **Приклад трансформованого коду:** ```tsx // Ваш код const content = useIntlayer("my-key"); // Оптимізований код (Статичний) const content = useDictionary({ key: "my-key", content: { nodeType: "translation", translation: { uk: "Мій заголовок", en: "My title", fr: "Mon titre", }, }, }); ``` ### 2. Динамічний режим У динамічному режимі Intlayer замінює `useIntlayer` на `useDictionaryAsync`. Це використовує `import()` (механізм, схожий на Suspense) для лінивого підвантаження саме JSON для поточної локалі. - **Плюси:** **Tree-shaking на рівні локалі.** Користувач, який переглядає англійську версію, завантажить _лише_ англійський словник. Французький словник ніколи не завантажується. - **Мінуси:** Під час гідратації ініціюється мережевий запит (завантаження ресурсу) для кожного компонента. - **Кращий вибір для:** Великих текстових блоків, статей або застосунків з підтримкою багатьох мов, де розмір бандла критично важливий. **Приклад трансформованого коду:** ```tsx // Ваш код const content = useIntlayer("my-key"); // Оптимізований код (Динамічний) const content = useDictionaryAsync({ en: () => import(".intlayer/dynamic_dictionary/my-key/en.json").then( (mod) => mod.default ), fr: () => import(".intlayer/dynamic_dictionary/my-key/fr.json").then( (mod) => mod.default ), }); ``` > Коли ви використовуєте `importMode: 'dynamic'`, якщо на одній сторінці 100 компонентів використовують `useIntlayer`, браузер спробує виконати 100 окремих запитів. Щоб уникнути цього «водоспаду» запитів, групуйте контент у меншу кількість `.content` файлів (наприклад, по одному словнику на секцію сторінки), замість одного файлу на кожен атом-компонент. > Наразі `importMode: 'dynamic'` не повністю підтримується для Vue та Svelte. Рекомендується використовувати `importMode: 'static'` для цих фреймворків до наступних оновлень. ### 3. Живий режим Працює аналогічно динамічному режиму, але спочатку намагається отримати словники з Intlayer Live Sync API. Якщо виклик API не вдасться або вміст не позначено для живих оновлень, виконується відкат до динамічного імпорту. > Див. документацію CMS для детальнішої інформації: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md) ## Підсумок: Статичний vs Динамічний | Особливість | Статичний режим | Динамічний режим | | :------------------------- | :---------------------------------------- | :---------------------------------------------- | | **Розмір JS-бандла** | Більший (включає всі мови для компонента) | Найменший (тільки код, без контенту) | | **Початкове завантаження** | Миттєво (вміст у bundle) | Невелика затримка (завантажує JSON) | | **Мережеві запити** | 0 додаткових запитів | 1 запит на словник | | **Tree Shaking** | На рівні компонентів | На рівні компонентів + на рівні локалі | | **Найкраще використання** | UI Components, невеликі додатки | Сторінки з великою кількістю тексту, багато мов |