(enhance) 言語ファイルを lazy-loading する

.gitignore

@@ -21,3 +21,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# Locale build outputs
+locales_dist

i18n.config.ts

@@ -1,14 +1,5 @@
-import ja from '@/locales/ja-JP.yml';
-import en from '@/locales/en-US.yml';
-
 export default defineI18nConfig(() => ({
 	legacy: false,
-	locale: 'ja',
-	fallbackLocale: 'ja',
-	messages: {
-		ja,
-		en,
-	},
 	datetimeFormats: {
 		'en-US': {
 			short: {

locales/ja-JP.yml

@@ -226,4 +226,4 @@ _aboutUs:
 _api:
   _permissions:
     title: "権限"
-    description: "説明"
+    description: "説明"

nuxt.config.ts

@@ -1,24 +1,25 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import ViteYaml from '@modyfi/vite-plugin-yaml';
+import yaml from '@rollup/plugin-yaml';
 import svgLoader from 'vite-svg-loader';
 import genSitemap from './scripts/gen-sitemap';
 import { genApiTranslationFiles } from './scripts/gen-api-translations';
 import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
+import { genLocalesJson } from './scripts/gen-locales';
 
 // 公開時のドメイン（末尾スラッシュなし）
 const baseUrl = 'https://misskey-hub.net';
 
 // 言語定義
 export const localesConst = [
-	{ code: 'ja', iso: 'ja-JP', name: '日本語' },
+	{ files: [ 'ja-JP.json' ], code: 'ja', iso: 'ja-JP', name: '日本語' },
-	{ code: 'en', iso: 'en-US', name: 'English' },
+	{ files: [ 'en-US.json' ], code: 'en', iso: 'en-US', name: 'English' },
-	{ code: 'id', iso: 'id-ID', name: 'Bahasa Indonesia' },
+	{ files: [ 'id-ID.json' ], code: 'id', iso: 'id-ID', name: 'Bahasa Indonesia' },
-	{ code: 'ko', iso: 'ko-KR', name: '한국어' },
+	{ files: [ 'ko-KR.json' ], code: 'ko', iso: 'ko-KR', name: '한국어' },
-	{ code: 'it', iso: 'it-IT', name: 'Italiano' },
+	{ files: [ 'it-IT.json' ], code: 'it', iso: 'it-IT', name: 'Italiano' },
-	{ code: 'pl', iso: 'pl-PL', name: 'Polski' },
+	{ files: [ 'pl-PL.json' ], code: 'pl', iso: 'pl-PL', name: 'Polski' },
-	{ code: 'fr', iso: 'fr-FR', name: 'Français' },
+	{ files: [ 'fr-FR.json' ], code: 'fr', iso: 'fr-FR', name: 'Français' },
-	{ code: 'cn', iso: 'zh-CN', name: '简体中文' },
+	{ files: [ 'zh-CN.json' ], code: 'cn', iso: 'zh-CN', name: '简体中文' },
-	{ code: 'tw', iso: 'zh-TW', name: '繁体中文' },
+	{ files: [ 'zh-TW.json' ], code: 'tw', iso: 'zh-TW', name: '繁体中文' },
 ] as const;
 
 export type LocaleCodes = typeof localesConst[number]['code'];
@@ -73,6 +74,8 @@ export default defineNuxtConfig({
 		baseUrl,
 		vueI18n: './i18n.config.ts',
 		locales,
+		lazy: true,
+		langDir: 'locales_dist',
 		defaultLocale: 'ja',
 		strategy: 'prefix',
 		detectBrowserLanguage: {
@@ -94,7 +97,7 @@ export default defineNuxtConfig({
 	},
 	vite: {
 		plugins: [
-			ViteYaml(),
+			yaml(),
 			svgLoader({
 				defaultImport: 'component',
 				svgoConfig: {
@@ -110,7 +113,7 @@ export default defineNuxtConfig({
 					]
 				}
 			}),
-		]
+		],
 	},
 	nitro: {
 		hooks: {
@@ -129,7 +132,10 @@ export default defineNuxtConfig({
 		],
 	},
 	hooks: {
-		'build:before': genApiTranslationFiles,
+		'build:before': (...args) => {
+			genApiTranslationFiles(...args);
+			genLocalesJson(...args);
+		},
 	},
 	experimental: {
 		inlineSSRStyles: false,

package.json

@@ -14,6 +14,7 @@
     "@nuxt/content": "npm:@nuxt/content-edge@2.9.0-28315240.7dcbf13",
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/i18n": "8.0.0-rc.5",
+    "@rollup/plugin-yaml": "^4.1.2",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.9.0",
     "@types/nprogress": "^0.2.3",
@@ -43,7 +44,6 @@
   },
   "packageManager": "pnpm@8.10.2",
   "dependencies": {
-    "js-yaml": "^4.1.0",
     "nanoid": "^5.0.3"
   }
 }

pnpm-lock.yaml

@@ -5,9 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  js-yaml:
-    specifier: ^4.1.0
-    version: 4.1.0
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -28,6 +25,9 @@ devDependencies:
   '@nuxtjs/i18n':
     specifier: 8.0.0-rc.5
     version: 8.0.0-rc.5(vue@3.3.8)
+  '@rollup/plugin-yaml':
+    specifier: ^4.1.2
+    version: 4.1.2
   '@types/js-yaml':
     specifier: ^4.0.9
     version: 4.0.9
@@ -1950,6 +1950,20 @@ packages:
       rollup: 3.29.4
     dev: true
 
+  /@rollup/plugin-yaml@4.1.2:
+    resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
+      js-yaml: 4.1.0
+      tosource: 2.0.0-alpha.3
+    dev: true
+
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -2816,6 +2830,7 @@ packages:
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
 
   /ast-kit@0.11.2:
     resolution: {integrity: sha512-Q0DjXK4ApbVoIf9GLyCo252tUH44iTnD/hiJ2TQaJeydYWSpKk0sI34+WMel8S9Wt5pbLgG02oJ+gkgX5DV3sQ==}
@@ -4932,6 +4947,7 @@ packages:
     hasBin: true
     dependencies:
       argparse: 2.0.1
+    dev: true
 
   /jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}

scripts/gen-locales.ts

@@ -0,0 +1,42 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as yaml from 'js-yaml';
+
+export function genLocalesJson() {
+    const sourceDirectory = path.resolve(__dirname, '../locales/');
+    const destinationDirectory = path.resolve(__dirname, '../locales_dist/');
+
+    // ディレクトリ内のすべてのファイルを取得
+    const files = fs.readdirSync(sourceDirectory);
+
+    // 出力ディレクトリが存在しない場合は作成
+    if (!fs.existsSync(destinationDirectory)) {
+        fs.mkdirSync(destinationDirectory);
+    }
+
+    // 各ファイルを処理
+    files.forEach((file) => {
+        const fileMeta = path.parse(file);
+        if (!['.yml', '.yaml'].includes(fileMeta.ext)) return;
+
+        const sourceFilePath = path.join(sourceDirectory, file);
+        const destinationFilePath = path.join(destinationDirectory, `${fileMeta.name}.json`);
+
+        try {
+            // YAMLファイルを読み込み
+            const yamlContent = fs.readFileSync(sourceFilePath, 'utf-8');
+
+            // YAMLをJSONに変換
+            const jsonContent = yaml.load(yamlContent);
+
+            // JSONをファイルに書き込み
+            fs.writeFileSync(destinationFilePath, jsonContent ? JSON.stringify(jsonContent) : '{}');
+
+            console.log(`Converted ${file} to ${fileMeta.name}.json`);
+        } catch (error) {
+            console.error(`Error processing ${file}`, error);
+        }
+    });
+
+    console.log('Conversion complete.');
+}