Оптимизация размера бандла i18n и производительности

Одной из наиболее распространенных проблем традиционных i18n-решений, полагающихся на JSON-файлы, является управление размером контента. Если разработчики вручную не разделяют контент на пространства имен (namespaces), пользователи часто скачивают переводы для каждой страницы и, возможно, для каждого языка только для того, чтобы просмотреть одну страницу.

Например, приложение с 10 страницами, переведенными на 10 языков, может привести к тому, что пользователь скачает контент 100 страниц, хотя ему нужна только одна (текущая страница на текущем языке). Это ведет к напрасной трате трафика и замедлению времени загрузки.

Intlayer решает эту проблему с помощью оптимизации на этапе сборки. Он анализирует ваш код, чтобы определить, какие словари действительно используются в каждом компоненте, и внедряет только необходимый контент в ваш бандл.

Содержание

Сканирование бандла

Анализ бандла - это первый шаг к выявлению "тяжелых" JSON-файлов и возможностей разделения кода. Эти инструменты генерируют визуальную древовидную карту (treemap) скомпилированного кода вашего приложения, позволяя вам точно увидеть, какие библиотеки занимают больше всего места.

npm install -D rollup-plugin-visualizer

import { defineConfig } from "vite";import { visualizer } from "rollup-plugin-visualizer";export default defineConfig({ plugins: [   visualizer({     open: true, // Автоматически открыть отчет в браузере     filename: "stats.html",     gzipSize: true,     brotliSize: true,   }), ],});

npx next experimental-analyze

npm install -D @next/bundle-analyzer

const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: process.env.ANALYZE === "true",});module.exports = withBundleAnalyzer({ // Ваша конфигурация Next.js});

ANALYZE=true npm run build

npm install -D webpack-bundle-analyzer

import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";export default { plugins: [   new BundleAnalyzerPlugin({     analyzerMode: "static",     reportFilename: "bundle-analyzer.html",     openAnalyzer: false,   }), ],};

Как это работает

Intlayer использует подход на уровне компонентов. В отличие от глобальных JSON-файлов, ваш контент определяется рядом с вашими компонентами или внутри них. В процессе сборки Intlayer:

1. Анализирует ваш код на наличие вызовов useIntlayer.
2. Собирает соответствующий контент словаря.
3. Заменяет вызов useIntlayer оптимизированным кодом на основе вашей конфигурации.

Это гарантирует, что:

• Если компонент не импортирован, его контент не включается в бандл (удаление мертвого кода).
• Если компонент загружается лениво (lazy-loading), его контент также загружается лениво.

Настройка по платформам

npm install -D @intlayer/swc

npm install -D @intlayer/babel

const { getOptimizePluginOptions, intlayerOptimizeBabelPlugin,} = require("@intlayer/babel");module.exports = { plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],};

Конфигурация

Вы можете управлять тем, как Intlayer оптимизирует ваш бандл, с помощью свойства build в вашем intlayer.config.ts.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH],    defaultLocale: Locales.ENGLISH,  },  dictionary: {    importMode: "dynamic",  },  build: {    /**     * Минифицировать словари для уменьшения размера бандла.     */     minify: true;    /**     * Удалять неиспользуемые ключи в словарях (purge)     */     purge: true;    /**     * Указывает, должна ли сборка проверять типы TypeScript     */    checkTypes: false;  },};export default config;

В подавляющем большинстве случаев рекомендуется оставлять значение по умолчанию для параметра optimize.

Подробности см. в документации по конфигурации: Конфигурация

Опции сборки

В объекте конфигурации build доступны следующие опции:

Минификация

Минификация словарей удаляет ненужные пробелы, комментарии и уменьшает размер содержимого JSON. Это особенно полезно для больших словарей.

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    minify: true,  },};export default config;

Примечание: Минификация игнорируется, если optimize отключен или если включен Визуальный редактор (так как редактору требуется полный контент для возможности редактирования).

Очистка (Purging)

Очистка гарантирует, что в финальный бандл словарей будут включены только те ключи, которые действительно используются в вашем коде. Это может значительно уменьшить размер вашего бандла, если у вас есть большие словари со множеством ключей, которые используются не во всех частях вашего приложения.

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    purge: true,  },};export default config;

Примечание: Очистка игнорируется, если параметр optimize отключен.

Режим импорта (Import Mode)

Для больших приложений, включающих множество страниц и локалей, ваши JSON-файлы могут составлять значительную часть размера бандла. Intlayer позволяет вам контролировать способ загрузки словарей.

Режим импорта может быть определен по умолчанию глобально в вашем файле intlayer.config.ts.

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    minify: true,  },};export default config;

А также для каждого словаря в ваших файлах .content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}.

import { type Dictionary, t } from "intlayer";const appContent: Dictionary = {  key: "app",  importMode: "dynamic", // Переопределить режим импорта по умолчанию  content: {    // ...  },};export default appContent;

Настройка importMode определяет, как содержимое словаря внедряется в ваш компонент. Вы можете определить его глобально в файле intlayer.config.ts в объекте dictionary или переопределить для конкретного словаря в его файле .content.ts.

1. Статический режим (default)

В статическом режиме Intlayer заменяет useIntlayer на useDictionary и внедряет словарь непосредственно в JavaScript бандл.

• Плюсы: Мгновенный рендеринг (синхронный), отсутствие дополнительных сетевых запросов во время гидратации.
• Минусы: Бандл включает переводы для всех доступных языков для этого конкретного компонента.
• Лучше всего для: Одностраничных приложений (SPA).

Пример трансформированного кода:

// Ваш кодconst content = useIntlayer("my-key");// Оптимизированный код (Статический)const content = useDictionary({  key: "my-key",  content: {    nodeType: "translation",    translation: {      en: "My title",      fr: "Mon titre",    },  },});

2. Динамический режим

В динамическом режиме Intlayer заменяет useIntlayer на useDictionaryAsync. Это использует import() (механизм типа Suspense) для ленивой загрузки конкретно JSON для текущей локали.

• Плюсы: Tree shaking на уровне локали. Пользователь, просматривающий английскую версию, скачает только английский словарь. Французский словарь никогда не загрузится.
• Минусы: Вызывает сетевой запрос (загрузку ассета) для каждого компонента во время гидратации.
• Лучше всего для: Больших текстовых блоков, статей или приложений с поддержкой многих языков, где размер бандла критичен.

Пример трансформированного кода:

// Ваш код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 (например, один словарь на раздел страницы), а не по одному на каждый мелкий компонент.

3. Режим Fetch

Ведет себя аналогично динамическому режиму, но сначала пытается получить словари из API Intlayer Live Sync. Если вызов API завершается неудачей или контент не помечен для живых обновлений, он переключается на динамический импорт.

Подробности см. в документации CMS: CMS

В режиме fetch нельзя использовать очистку (purge) и минификацию.

Резюме: Статический vs Динамический