UX: Reduce JS bundle size by loading translation files on demand photoprism#4778

Signed-off-by: Michael Mayer <michael@photoprism.app>

Author: lastzero

frontend/gettext.config.js

@@ -0,0 +1,21 @@
+const glob = require("glob");
+const path = require("path");
+const poPath = path.resolve(__dirname, "src/locales");
+
+// Generates a list of existing locales based on the files in src/locales.
+const languageCodes = glob.sync(poPath + "/*.po").map((filePath) => {
+  const fileName = path.basename(filePath);
+  return fileName.replace(".po", "");
+});
+
+// Generates one JSON file per locale from the gettext *.po files located in src/locales.
+module.exports = {
+  output: {
+    path: path.resolve(__dirname, "src/locales"),
+    potPath: "src/locales/translations.pot",
+    jsonPath: "json",
+    locales: languageCodes,
+    splitJson: true,
+    flat: true,
+  },
+};

frontend/package-lock.json

@@ -19,7 +19,7 @@
     "testcafe": "testcafe",
     "acceptance-local": "testcafe chromium --selector-timeout 5000 -S -s tests/acceptance/screenshots tests/acceptance",
     "gettext-extract": "gettext-extract --output src/locales/translations.pot $(find ${SRC:-src} -type f \\( -iname \\*.vue -o -iname \\*.js \\) -not -path src/common/gettext.js)",
-    "gettext-compile": "gettext-compile --output src/locales/translations.json src/locales/*.po",
+    "gettext-compile": "vue-gettext-compile",
     "dep-list": "npx npm-check-updates"
   },
   "dependencies": {

frontend/package.json

@@ -26,7 +26,6 @@ Additional information can be found in our Developer Guide:
 import $api from "common/api";
 import $event from "common/event";
 import * as themes from "options/themes";
-import translations from "locales/translations.json";
 import { Languages } from "options/options";
 import { Photo } from "model/photo";
 import { onInit, onSetTheme } from "common/hooks";
@@ -48,7 +47,7 @@ export default class Config {
     this.updating = false;
 
     this.$vuetify = null;
-    this.translations = translations;
+    this.translations = {};
 
     if (!values || !values.siteTitle) {
       // Omit warning in unit tests.
@@ -166,7 +165,7 @@ export default class Config {
     return this.updating;
   }
 
-  setValues(values) {
+  async setValues(values) {
     if (!values || typeof values !== "object") {
       return;
     }
@@ -185,7 +184,7 @@ export default class Config {
 
     if (values.settings) {
       this.setBatchSize(values.settings);
-      this.setLanguage(values.settings.ui.language, true);
+      await this.setLanguage(values.settings.ui.language, true);
       this.setTheme(values.settings.ui.theme);
     }
 
@@ -417,16 +416,38 @@ export default class Config {
     return !this.allowAny(resource, perm);
   }
 
+  // loadTranslation asynchronously loads the specified locale file.
+  async loadTranslation(locale) {
+    if (!locale || (this.translations && this.translations[locale])) {
+      return;
+    }
+
+    try {
+      // Dynamically import the translation JSON file.
+      await import(
+        /* webpackChunkName: "[request]" */
+        /* webpackMode: "lazy" */
+        `../locales/json/${locale}.json`
+      ).then((module) => {
+        Object.assign(this.translations, module.default);
+      });
+    } catch (error) {
+      console.error(`failed to load translations for locale ${locale}:`, error);
+    }
+  }
+
   // setLanguage sets the ISO/IEC 15897 locale,
   // e.g. "en" or "zh_TW" (minimum 2 letters).
-  setLanguage(locale, apply) {
+  async setLanguage(locale, apply) {
     // Skip setting language if no locale is specified.
     if (!locale) {
       return this;
     }
 
     // Apply locale to browser window?
     if (apply) {
+      await this.loadTranslation(locale);
+
       // Update the Accept-Language header for XHR requests.
       if ($api) {
         $api.defaults.headers.common["Accept-Language"] = locale;

frontend/src/common/config.js

@@ -0,0 +1 @@
+{"en":{"Next":"Next"}}

frontend/src/locales/README.md

@@ -290,22 +290,22 @@ describe("common/config", () => {
     assert.equal(cfg.values.count.all, 139);
   });
 
-  it("should return user interface direction string", () => {
+  it("should return user interface direction string", async () => {
     const cfg = new Config(new StorageShim(), Object.assign({}, window.__CONFIG__));
-    cfg.setLanguage("en", true);
+    await cfg.setLanguage("en", true);
     assert.equal(document.dir, "ltr", "document.dir should be ltr");
     assert.equal(cfg.dir(), "ltr");
     assert.equal(cfg.dir(true), "rtl");
     assert.equal(cfg.dir(false), "ltr");
-    cfg.setLanguage("he", false);
+    await cfg.setLanguage("he", false);
     assert.equal(document.dir, "ltr", "document.dir should still be ltr");
-    cfg.setLanguage("he", true);
+    await cfg.setLanguage("he", true);
     assert.equal(cfg.dir(), "rtl");
     assert.equal(document.dir, "rtl", "document.dir should now be rtl");
     assert.equal(cfg.dir(), "rtl");
     assert.equal(cfg.dir(true), "rtl");
     assert.equal(cfg.dir(false), "ltr");
-    cfg.setLanguage("en", true);
+    await cfg.setLanguage("en", true);
     assert.equal(document.dir, "ltr", "document.dir should be ltr again");
     assert.equal(cfg.dir(), "ltr");
   });

frontend/src/locales/json/af.json

@@ -46,7 +46,6 @@ const PATHS = {
   share: path.join(__dirname, "src/share.js"),
   splash: path.join(__dirname, "src/splash.js"),
   build: path.join(__dirname, "../assets/static/build"),
-  public: "./",
 };
 
 if (isCustom) {
@@ -72,8 +71,10 @@ const config = {
   },
   output: {
     path: PATHS.build,
-    publicPath: PATHS.public,
+    publicPath: "auto",
     filename: "[name].[contenthash].js",
+    chunkFilename: "chunk/[name].[contenthash].js",
+    asyncChunks: true,
     clean: true,
   },
   resolve: {
@@ -147,16 +148,18 @@ const config = {
           },
         ],
       },
+      {
+        test: /\.json$/,
+        include: PATHS.src,
+        type: "json",
+      },
       {
         test: /\.css$/,
         include: isCustom ? [PATHS.custom, PATHS.css] : [PATHS.css],
         exclude: /node_modules/,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: PATHS.public,
-            },
           },
           {
             loader: "css-loader",
@@ -183,9 +186,6 @@ const config = {
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: PATHS.public,
-            },
           },
           {
             loader: "css-loader",
@@ -211,9 +211,6 @@ const config = {
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: PATHS.public,
-            },
           },
           {
             loader: "css-loader",