تحسين حجم وأداء حزمة i18n

واحدة من أكثر التحديات شيوعًا مع حلول i18n التقليدية التي تعتمد على ملفات JSON هي إدارة حجم المحتوى. إذا لم يقم المطورون بفصل المحتوى يدويًا إلى مساحات أسماء، غالبًا ما ينتهي الأمر بالمستخدمين إلى تنزيل ترجمات لكل صفحة وربما لكل لغة لمجرد عرض صفحة واحدة.

على سبيل المثال، قد يؤدي تطبيق يحتوي على 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 بكود محسن بناءً على تكوينك.

هذا يضمن أن:

• إذا لم يتم استيراد مكون، فلن يتم تضمين محتواه في الحزمة (إزالة الكود الميت).
• إذا تم تحميل مكون بشكل كسول، فسيتم أيضًا تحميل محتواه بشكل كسول.

الإعداد حسب المنصة

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: true;    /**     * يشير إلى ما إذا كان يجب على البناء التحقق من أنواع TypeScript     */    checkTypes: false;  },};export default config;

يُنصح بالاحتفاظ بالخيار الافتراضي لـ optimize في معظم الحالات.

راجع توثيق التكوين لمزيد من التفاصيل: التكوين

خيارات البناء

الخيارات التالية متاحة ضمن كائن تكوين build:

التصغير (Minification)

يؤدي تصغير القواميس إلى إزالة المسافات البيضاء والتعليقات غير الضرورية وتقليل حجم محتوى JSON. هذا مفيد بشكل خاص للقواميس الكبيرة.

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

ملاحظة: يتم تجاهل التصغير إذا تم تعطيل optimize أو إذا تم تمكين المحرر المرئي (Visual Editor) (لأن المحرر يحتاج إلى المحتوى الكامل للسماح بالتحرير).

التطهير (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 ويحقن القاموس مباشرة في حزمة جافا سكريبت.

• الإيجابيات: عرض فوري (متزامن)، بدون طلبات شبكة إضافية أثناء التهيئة.
• السلبيات: الحزمة تتضمن ترجمات لكل اللغات المتاحة لذلك المكون المحدد.
• الأفضل لـ: تطبيقات الصفحة الواحدة (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 الخاص باللغة الحالية بشكل كسول.

• الإيجابيات: تحسين على مستوى اللغة (Locale-level tree shaking). المستخدم الذي يعرض النسخة الإنجليزية سيقوم بتحميل قاموس اللغة الإنجليزية فقط. قاموس اللغة الفرنسية لن يتم تحميله أبدًا.
• السلبيات: يؤدي إلى طلب شبكة (جلب الأصول) لكل مكون أثناء عملية التهيئة (hydration).
• الأفضل لـ: كتل نصية كبيرة، مقالات، أو تطبيقات تدعم العديد من اللغات حيث يكون حجم الحزمة أمرًا حاسمًا.

مثال على الكود المحول:

// كودك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 Mode)

يتصرف بشكل مشابه للوضع الديناميكي لكنه يحاول أولاً جلب القواميس من واجهة برمجة تطبيقات المزامنة الحية Intlayer Live Sync API. إذا فشل استدعاء API أو لم يكن المحتوى معلمًا للتحديثات الحية، فإنه يعود إلى الاستيراد الديناميكي.

راجع توثيق CMS لمزيد من التفاصيل: CMS

في وضع الجلب، لا يمكن استخدام التطهير والتصغير.

الملخص: الوضع الثابت مقابل الوضع الديناميكي