Tối ưu hóa kích thước Bundle i18n & Hiệu suất

Một trong những thách thức phổ biến nhất với các giải pháp i18n truyền thống dựa trên tệp JSON là quản lý kích thước nội dung. Nếu các nhà phát triển không tách nội dung thành các không gian tên (namespaces) theo cách thủ công, người dùng thường phải tải xuống các bản dịch cho mọi trang và có thể là mọi ngôn ngữ chỉ để xem một trang duy nhất.

Ví dụ, một ứng dụng có 10 trang được dịch sang 10 ngôn ngữ có thể dẫn đến việc người dùng tải xuống nội dung của 100 trang, mặc dù họ chỉ cần một trang (trang hiện tại bằng ngôn ngữ hiện tại). Điều này dẫn đến lãng phí băng thông và thời gian tải chậm hơn.

Intlayer giải quyết vấn đề này thông qua tối ưu hóa tại thời điểm build. Nó phân tích mã của bạn để phát hiện từ điển nào thực sự được sử dụng cho mỗi thành phần và chỉ chèn lại nội dung cần thiết vào bundle của bạn.

Mục lục

Quét bundle của bạn

Phân tích bundle là bước đầu tiên để xác định các tệp JSON "nặng" và cơ hội tách mã (code-splitting). Các công cụ này tạo ra một sơ đồ cây (treemap) trực quan về mã đã biên dịch của ứng dụng, cho phép bạn thấy chính xác thư viện nào đang tiêu tốn nhiều không gian nhất.

npm install -D rollup-plugin-visualizer

import { defineConfig } from "vite";import { visualizer } from "rollup-plugin-visualizer";export default defineConfig({ plugins: [   visualizer({     open: true, // Tự động mở báo cáo trong trình duyệt của bạn     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({ // Cấu hình Next.js của bạn});

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

Cách thức hoạt động

Intlayer sử dụng cách tiếp cận theo từng thành phần. Không giống như các tệp JSON toàn cục, nội dung của bạn được xác định bên cạnh hoặc bên trong các thành phần của bạn. Trong quá trình build, Intlayer sẽ:

1. Phân tích mã của bạn để tìm các cuộc gọi useIntlayer.
2. Xây dựng nội dung từ điển tương ứng.
3. Thay thế cuộc gọi useIntlayer bằng mã được tối ưu hóa dựa trên cấu hình của bạn.

Điều này đảm bảo rằng:

• Nếu một thành phần không được nhập, nội dung của nó sẽ không được bao gồm trong bundle (Loại bỏ mã chết - Dead Code Elimination).
• Nếu một thành phần được tải chậm (lazy-loaded), nội dung của nó cũng được tải chậm.

Thiết lập theo Nền tảng

npm install -D @intlayer/swc

npm install -D @intlayer/babel

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

Cấu hình

Bạn có thể kiểm soát cách Intlayer tối ưu hóa bundle của mình thông qua thuộc tính build trong tệp 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: {    /**     * Nén (minify) các từ điển để giảm kích thước bundle.     */     minify: true;    /**     * Loại bỏ (purge) các khóa không sử dụng trong từ điển     */     purge: true;    /**     * Cho biết liệu quá trình build có nên kiểm tra các kiểu TypeScript hay không     */    checkTypes: false;  },};export default config;

Giữ tùy chọn mặc định cho optimize được khuyến nghị trong hầu hết các trường hợp.

Xem cấu hình tài liệu để biết thêm chi tiết: Cấu hình

Tùy chọn Build

Các tùy chọn sau đây có sẵn trong đối tượng cấu hình build:

Nén (Minification)

Nén từ điển giúp loại bỏ các khoảng trắng, nhận xét không cần thiết và giảm kích thước nội dung JSON. Điều này đặc biệt hữu ích cho các từ điển lớn.

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

Lưu ý: Nén bị bỏ qua nếu optimize bị tắt hoặc nếu Trình chỉnh sửa trực quan (Visual Editor) được bật (vì trình chỉnh sửa cần nội dung đầy đủ để cho phép chỉnh sửa).

Loại bỏ (Purging)

Loại bỏ đảm bảo rằng chỉ những khóa thực sự được sử dụng trong mã của bạn mới được đưa vào bundle từ điển cuối cùng. Điều này có thể giảm đáng kể kích thước bundle của bạn nếu bạn có các từ điển lớn với nhiều khóa không được sử dụng trong mọi phần của ứng dụng.

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

Lưu ý: Loại bỏ bị bỏ qua nếu optimize bị tắt.

Chế độ Nhập (Import Mode)

Đối với các ứng dụng lớn, bao gồm nhiều trang và ngôn ngữ, tệp JSON của bạn có thể chiếm một phần đáng kể trong kích thước bundle. Intlayer cho phép bạn kiểm soát cách tải từ điển.

Chế độ nhập có thể được xác định mặc định trên toàn cầu trong tệp intlayer.config.ts của bạn.

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

Cũng như đối với mỗi từ điển trong các tệp .content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}} của bạn.

import { type Dictionary, t } from "intlayer";const appContent: Dictionary = {  key: "app",  importMode: "dynamic", // Ghi đè chế độ nhập mặc định  content: {    // ...  },};export default appContent;

Cài đặt importMode quy định cách nội dung từ điển được chèn vào thành phần của bạn. Bạn có thể xác định nó trên toàn cầu trong tệp intlayer.config.ts dưới đối tượng dictionary, hoặc bạn có thể ghi đè nó cho một từ điển cụ thể trong tệp .content.ts của nó.

1. Chế độ Tĩnh (default)

Trong chế độ tĩnh, Intlayer thay thế useIntlayer bằng useDictionary và chèn từ điển trực tiếp vào bundle JavaScript.

• Ưu điểm: Hiển thị tức thì (đồng bộ), không có yêu cầu mạng bổ sung trong quá trình hydrat hóa.
• Nhược điểm: Bundle bao gồm các bản dịch cho tất cả các ngôn ngữ có sẵn cho thành phần cụ thể đó.
• Tốt nhất cho: Ứng dụng trang đơn (SPA).

Ví dụ mã đã chuyển đổi:

// Mã của bạnconst content = useIntlayer("my-key");// Mã được tối ưu hóa (Tĩnh)const content = useDictionary({  key: "my-key",  content: {    nodeType: "translation",    translation: {      en: "My title",      fr: "Mon titre",    },  },});

2. Chế độ Động

Trong chế độ động, Intlayer thay thế useIntlayer bằng useDictionaryAsync. Điều này sử dụng import() (cơ chế giống như Suspense) để tải chậm (lazy-load) cụ thể JSON cho ngôn ngữ hiện tại.

• Ưu điểm: Tree shaking cấp độ ngôn ngữ. Người dùng xem phiên bản tiếng Anh sẽ chỉ tải xuống từ điển tiếng Anh. Từ điển tiếng Pháp không bao giờ được tải.
• Nhược điểm: Kích hoạt một yêu cầu mạng (lấy tài nguyên) cho mỗi thành phần trong quá trình hydrat hóa.
• Tốt nhất cho: Các khối văn bản lớn, bài báo hoặc ứng dụng hỗ trợ nhiều ngôn ngữ nơi kích thước bundle là quan trọng.

Ví dụ mã đã chuyển đổi:

// Mã của bạnconst content = useIntlayer("my-key");// Mã được tối ưu hóa (Động)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    ),});

Khi sử dụng importMode: 'dynamic', nếu bạn có 100 thành phần sử dụng useIntlayer trên một trang duy nhất, trình duyệt sẽ thử 100 lần lấy riêng biệt. Để tránh tình trạng "thác nước" (waterfall) của các yêu cầu này, hãy nhóm nội dung vào ít tệp .content hơn (ví dụ: một từ điển cho mỗi phần trang) thay vì một từ điển cho mỗi thành phần nguyên tử.

3. Chế độ Fetch

Hoạt động tương tự như chế độ Động nhưng cố gắng lấy các từ điển từ Intlayer Live Sync API trước. Nếu cuộc gọi API thất bại hoặc nội dung không được đánh dấu để cập nhật trực tiếp, nó sẽ quay lại chế độ nhập động.

Xem tài liệu CMS để biết thêm chi tiết: CMS

Trong chế độ fetch, không thể sử dụng loại bỏ (purge) và nén (minification).

Tóm tắt: Tĩnh vs Động