Mengoptimalkan Ukuran Bundle i18n & Performa

Salah satu tantangan paling umum dengan solusi i18n tradisional yang mengandalkan file JSON adalah mengelola ukuran konten. Jika pengembang tidak memisahkan konten ke dalam namespace secara manual, pengguna sering kali akhirnya mengunduh terjemahan untuk setiap halaman dan berpotensi untuk setiap bahasa hanya untuk melihat satu halaman.

Misalnya, aplikasi dengan 10 halaman yang diterjemahkan ke dalam 10 bahasa dapat mengakibatkan pengguna mengunduh konten dari 100 halaman, padahal mereka hanya membutuhkan satu (halaman saat ini dalam bahasa saat ini). Hal ini menyebabkan pemborosan bandwidth dan waktu pemuatan yang lebih lambat.

Intlayer menyelesaikan masalah ini melalui optimasi waktu build. Ini menganalisis kode Anda untuk mendeteksi kamus mana yang sebenarnya digunakan per komponen dan menyuntikkan kembali hanya konten yang diperlukan ke dalam bundle Anda.

Daftar Isi

Pindai bundle Anda

Menganalisis bundle Anda adalah langkah pertama dalam mengidentifikasi file JSON yang "berat" dan peluang pemisahan kode (code-splitting). Alat-alat ini menghasilkan peta pohon (treemap) visual dari kode aplikasi Anda yang telah dikompilasi, memungkinkan Anda untuk melihat dengan tepat pustaka mana yang menghabiskan ruang paling banyak.

npm install -D rollup-plugin-visualizer

import { defineConfig } from "vite";import { visualizer } from "rollup-plugin-visualizer";export default defineConfig({ plugins: [   visualizer({     open: true, // Buka laporan secara otomatis di browser Anda     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({ // Konfigurasi Next.js Anda});

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,   }), ],};

Cara Kerjanya

Intlayer menggunakan pendekatan per-komponen. Tidak seperti file JSON global, konten Anda didefinisikan bersama atau di dalam komponen Anda. Selama proses build, Intlayer akan:

1. Menganalisis kode Anda untuk menemukan panggilan useIntlayer.
2. Membangun konten kamus yang sesuai.
3. Mengganti panggilan useIntlayer dengan kode yang dioptimalkan berdasarkan konfigurasi Anda.

Ini memastikan bahwa:

• Jika komponen tidak diimpor, kontennya tidak disertakan dalam bundle (Dead Code Elimination).
• Jika komponen dimuat secara lambat (lazy-loaded), kontennya juga dimuat secara lambat.

Setup Berdasarkan Platform

npm install -D @intlayer/swc

npm install -D @intlayer/babel

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

Konfigurasi

Anda dapat mengontrol cara Intlayer mengoptimalkan bundle Anda melalui properti build di intlayer.config.ts Anda.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH],    defaultLocale: Locales.ENGLISH,  },  dictionary: {    importMode: "dynamic",  },  build: {    /**     * Minifikasi kamus untuk memperkecil ukuran bundle.     */     minify: true;    /**     * Hapus (purge) kunci yang tidak digunakan dalam kamus     */     purge: true;    /**     * Menunjukkan apakah build harus memeriksa tipe TypeScript     */    checkTypes: false;  },};export default config;

Mempertahankan opsi default untuk optimize direkomendasikan dalam sebagian besar kasus.

Lihat dok konfigurasi untuk detail lebih lanjut: Konfigurasi

Opsi Build

Opsi berikut tersedia di bawah objek konfigurasi build:

Minifikasi

Meminimalkan kamus akan menghapus spasi putih yang tidak perlu, komentar, dan mengurangi ukuran konten JSON. Ini sangat berguna untuk kamus besar.

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

Catatan: Minifikasi diabaikan jika optimize dinonaktifkan atau jika Editor Visual diaktifkan (karena editor memerlukan konten lengkap untuk memungkinkan pengeditan).

Purging

Purging memastikan bahwa hanya kunci yang benar-benar digunakan dalam kode Anda yang disertakan dalam bundle kamus akhir. Ini dapat secara signifikan mengurangi ukuran bundle Anda jika Anda memiliki kamus besar dengan banyak kunci yang tidak digunakan di setiap bagian aplikasi Anda.

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

Catatan: Purging diabaikan jika optimize dinonaktifkan.

Mode Impor

Untuk aplikasi besar, termasuk beberapa halaman dan lokal, JSON Anda dapat mewakili bagian yang signifikan dari ukuran bundle Anda. Intlayer memungkinkan Anda untuk mengontrol bagaimana kamus dimuat.

Mode impor dapat didefinisikan secara default secara global dalam file intlayer.config.ts Anda.

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

Serta untuk setiap kamus dalam file .content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}} Anda.

import { type Dictionary, t } from "intlayer";const appContent: Dictionary = {  key: "app",  importMode: "dynamic", // Menimpa mode impor default  content: {    // ...  },};export default appContent;

Pengaturan importMode menentukan bagaimana konten kamus disuntikkan ke dalam komponen Anda. Anda dapat mendefinisikannya secara global dalam file intlayer.config.ts di bawah objek dictionary, atau Anda dapat menimpanya untuk kamus tertentu dalam file .content.ts nya.

1. Mode Statis (default)

Dalam mode statis, Intlayer mengganti useIntlayer dengan useDictionary dan menyuntikkan kamus langsung ke dalam bundle JavaScript.

• Kelebihan: Rendering instan (sinkron), nol permintaan jaringan ekstra selama hidrasi.
• Kekurangan: Bundle menyertakan terjemahan untuk semua bahasa yang tersedia untuk komponen tertentu tersebut.
• Terbaik untuk: Single Page Applications (SPA).

Contoh Kode yang Ditransformasi:

// Kode Andaconst content = useIntlayer("my-key");// Kode yang dioptimalkan (Statis)const content = useDictionary({  key: "my-key",  content: {    nodeType: "translation",    translation: {      en: "My title",      fr: "Mon titre",    },  },});

2. Mode Dinamis

Dalam mode dinamis, Intlayer mengganti useIntlayer dengan useDictionaryAsync. Ini menggunakan import() (mekanisme seperti Suspense) untuk memuat secara lambat (lazy-load) khususnya JSON untuk lokal saat ini.

• Kelebihan: Locale-level tree shaking. Pengguna yang melihat versi bahasa Inggris hanya akan mengunduh kamus bahasa Inggris. Kamus bahasa Prancis tidak pernah dimuat.
• Kekurangan: Memicu permintaan jaringan (pengambilan aset) per komponen selama hidrasi.
• Terbaik untuk: Blok teks besar, artikel, atau aplikasi yang mendukung banyak bahasa di mana ukuran bundle sangat penting.

Contoh Kode yang Ditransformasi:

// Kode Andaconst content = useIntlayer("my-key");// Kode yang dioptimalkan (Dinamis)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    ),});

Saat menggunakan importMode: 'dynamic', jika Anda memiliki 100 komponen yang menggunakan useIntlayer pada satu halaman, browser akan mencoba 100 pengambilan terpisah. Untuk menghindari "air terjun" permintaan ini, kelompokkan konten ke dalam lebih sedikit file .content (misalnya, satu kamus per bagian halaman) daripada satu per komponen atom.

3. Mode Fetch

Berperilaku mirip dengan mode Dinamis tetapi mencoba mengambil kamus dari Intlayer Live Sync API terlebih dahulu. Jika panggilan API gagal atau konten tidak ditandai untuk pembaruan langsung, ia akan kembali ke impor dinamis.

Lihat dok CMS untuk detail lebih lanjut: CMS

Dalam mode fetch, pembersihan (purge) dan minifikasi tidak dapat digunakan.

Ringkasan: Statis vs Dinamis