feat(unplugin-vue-i18n): exclude unused locales from the bundle (#301)

* feat(unplugin-vue-i18n): excluding locales from bundle * feat(unplugin-vue-i18n): excluding locales from bundle * feat(unplugin-vue-i18n): excluding locales from bundle
intlify · Sep 28, 2023 · 06dcfac · 06dcfac
1 parent e6fbc82
commit 06dcfac
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 9 deletions.
diff --git a/packages/bundle-utils/src/codegen.ts b/packages/bundle-utils/src/codegen.ts
@@ -47,6 +47,7 @@ export interface CodeGenOptions {
   legacy?: boolean
   bridge?: boolean
   exportESM?: boolean
+  onlyLocales?: string[]
   source?: string
   sourceMap?: boolean
   filename?: string
@@ -448,3 +449,21 @@ export function generateResourceAst(
   const code = !occured ? `${friendlyJSONstringify(ast)}` : `\`${_msg}\``
   return { code, ast, map, errors }
 }
+
+export function excludeLocales({
+  messages,
+  onlyLocales
+}: {
+  messages: Record<string, unknown>
+  onlyLocales: string[]
+}) {
+  const _messages = { ...messages }
+
+  Object.keys(_messages).forEach(locale => {
+    if (!onlyLocales.includes(locale)) {
+      delete _messages[locale]
+    }
+  })
+
+  return _messages
+}
diff --git a/packages/bundle-utils/src/json.ts b/packages/bundle-utils/src/json.ts
@@ -12,7 +12,8 @@ import {
   createCodeGenerator,
   generateMessageFunction,
   generateResourceAst,
-  mapLinesColumns
+  mapLinesColumns,
+  excludeLocales
 } from './codegen'
 import { generateLegacyCode } from './legacy'
 import MagicString from 'magic-string'
@@ -32,6 +33,7 @@ export function generate(
     type = 'plain',
     legacy = false,
     bridge = false,
+    onlyLocales = [],
     exportESM = false,
     filename = 'vue-i18n-loader.json',
     inSourceMap = undefined,
@@ -48,13 +50,12 @@ export function generate(
   }: CodeGenOptions,
   injector?: () => string
 ): CodeGenResult<JSONProgram> {
-  const target = Buffer.isBuffer(targetSource)
+  let value = Buffer.isBuffer(targetSource)
     ? targetSource.toString()
     : targetSource
   // const value = JSON.stringify(JSON.parse(target))
   //   .replace(/\u2028/g, '\\u2028') // line separator
   //   .replace(/\u2029/g, '\\u2029') // paragraph separator
-  const value = target
 
   const options = {
     type,
@@ -76,7 +77,19 @@ export function generate(
   } as CodeGenOptions
   const generator = createCodeGenerator(options)
 
-  const ast = parseJSON(value, { filePath: filename })
+  let ast = parseJSON(value, { filePath: filename })
+
+  if (!locale && type === 'sfc' && onlyLocales?.length) {
+    const messages = getStaticJSONValue(ast) as Record<string, unknown>
+
+    value = JSON.stringify(
+      excludeLocales({
+        messages,
+        onlyLocales
+      })
+    )
+    ast = parseJSON(value, { filePath: filename })
+  }
 
   // for vue 2.x
   if (legacy && type === 'sfc') {
@@ -104,9 +117,10 @@ export function generate(
   //   })
   // }
   // prettier-ignore
-  const newMap = map && !jit
-    ? mapLinesColumns((map as any).toJSON(), codeMaps, inSourceMap) || null // eslint-disable-line @typescript-eslint/no-explicit-any
-    : null
+  const newMap =
+    map && !jit
+      ? mapLinesColumns((map as any).toJSON(), codeMaps, inSourceMap) || null // eslint-disable-line @typescript-eslint/no-explicit-any
+      : null
   return {
     ast,
     code,

diff --git a/packages/bundle-utils/src/yaml.ts b/packages/bundle-utils/src/yaml.ts
@@ -5,6 +5,7 @@
 import { isString, friendlyJSONstringify } from '@intlify/shared'
 import {
   createCodeGenerator,
+  excludeLocales,
   generateMessageFunction,
   generateResourceAst,
   mapLinesColumns
@@ -35,6 +36,7 @@ export function generate(
     type = 'plain',
     legacy = false,
     bridge = false,
+    onlyLocales = [],
     exportESM = false,
     useClassComponent = false,
     filename = 'vue-i18n-loader.yaml',
@@ -51,7 +53,7 @@ export function generate(
   }: CodeGenOptions,
   injector?: () => string
 ): CodeGenResult<YAMLProgram> {
-  const value = Buffer.isBuffer(targetSource)
+  let value = Buffer.isBuffer(targetSource)
     ? targetSource.toString()
     : targetSource
 
@@ -75,7 +77,19 @@ export function generate(
   } as CodeGenOptions
   const generator = createCodeGenerator(options)
 
-  const ast = parseYAML(value, { filePath: filename })
+  let ast = parseYAML(value, { filePath: filename })
+
+  if (!locale && type === 'sfc' && onlyLocales?.length) {
+    const messages = getStaticYAMLValue(ast) as Record<string, unknown>
+
+    value = JSON.stringify(
+      excludeLocales({
+        messages,
+        onlyLocales
+      })
+    )
+    ast = parseYAML(value, { filePath: filename })
+  }
 
   // for vue 2.x
   if (legacy && type === 'sfc') {

diff --git a/packages/unplugin-vue-i18n/README.md b/packages/unplugin-vue-i18n/README.md
@@ -549,6 +549,13 @@ If you enable this option, **you should check  resources in your application are
 
   This option that to use i18n custom blocks in `vue-class-component`.
 
+### `onlyLocales`
+
+- **Type:** `string | string[]`
+- **Default:** `[]`
+
+  By using it you can exclude from the bundle those localizations that are not specified in this option.
+
 ### `useVueI18nImportName` (Experimental)
 
 - **Type:** `boolean`

diff --git a/packages/unplugin-vue-i18n/src/index.ts b/packages/unplugin-vue-i18n/src/index.ts
@@ -54,6 +54,14 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
     raiseError(`This plugin is supported 'vite' and 'webpack' only`)
   }
 
+  // normalize for `options.onlyLocales`
+  let onlyLocales: string[] = []
+  if (options.onlyLocales) {
+    onlyLocales = Array.isArray(options.onlyLocales)
+      ? options.onlyLocales
+      : [options.onlyLocales]
+  }
+
   // normalize for `options.include`
   let include = options.include
   let exclude = null
@@ -328,6 +336,7 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
                   escapeHtml,
                   bridge,
                   jit: jitCompilation,
+                  onlyLocales,
                   exportESM: esm,
                   forceStringify
                 }
@@ -544,6 +553,7 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
               escapeHtml,
               bridge,
               jit: jitCompilation,
+              onlyLocales,
               exportESM: esm,
               forceStringify
             }
@@ -606,6 +616,7 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
               jit: jitCompilation,
               strictMessage,
               escapeHtml,
+              onlyLocales,
               exportESM: esm,
               forceStringify
             }
@@ -699,6 +710,7 @@ async function generateBundleResources(
     forceStringify = false,
     isGlobal = false,
     bridge = false,
+    onlyLocales = [],
     exportESM = true,
     strictMessage = true,
     escapeHtml = false,
@@ -708,6 +720,7 @@ async function generateBundleResources(
     forceStringify?: boolean
     isGlobal?: boolean
     bridge?: boolean
+    onlyLocales?: string[]
     exportESM?: boolean
     strictMessage?: boolean
     escapeHtml?: boolean
@@ -728,6 +741,7 @@ async function generateBundleResources(
         useClassComponent,
         bridge,
         jit,
+        onlyLocales,
         exportESM,
         strictMessage,
         escapeHtml,
@@ -806,6 +820,7 @@ function getOptions(
     forceStringify = false,
     isGlobal = false,
     bridge = false,
+    onlyLocales = [],
     exportESM = true,
     useClassComponent = false,
     allowDynamic = false,
@@ -817,6 +832,7 @@ function getOptions(
     forceStringify?: boolean
     isGlobal?: boolean
     bridge?: boolean
+    onlyLocales?: string[]
     exportESM?: boolean
     useClassComponent?: boolean
     allowDynamic?: boolean
@@ -838,6 +854,7 @@ function getOptions(
     escapeHtml,
     bridge,
     jit,
+    onlyLocales,
     exportESM,
     env: mode,
     onWarn: (msg: string): void => {

diff --git a/packages/unplugin-vue-i18n/src/types.ts b/packages/unplugin-vue-i18n/src/types.ts
@@ -1,6 +1,7 @@
 export type SFCLangFormat = 'json' | 'json5' | 'yml' | 'yaml'
 export interface PluginOptions {
   include?: string | string[]
+  onlyLocales?: string | string[]
   allowDynamic?: boolean
   jitCompilation?: boolean
   dropMessageCompiler?: boolean

diff --git a/packages/unplugin-vue-i18n/test/vite/__snapshots__/custom-block.test.ts.snap b/packages/unplugin-vue-i18n/test/vite/__snapshots__/custom-block.test.ts.snap
@@ -174,6 +174,15 @@ exports[`jitCompilation 1`] = `
 ]
 `;
 
+exports[`json: exclude locales 1`] = `
+[
+  {
+    "locale": "",
+    "resource": {},
+  },
+]
+`;
+
 exports[`json5 1`] = `
 [
   {
@@ -187,6 +196,15 @@ exports[`json5 1`] = `
 ]
 `;
 
+exports[`json5: exclude locales 1`] = `
+[
+  {
+    "locale": "",
+    "resource": {},
+  },
+]
+`;
+
 exports[`locale attr 1`] = `
 [
   {
@@ -278,3 +296,20 @@ exports[`yaml 1`] = `
   },
 ]
 `;
+
+exports[`yaml: exclude locales 1`] = `
+[
+  {
+    "locale": "en",
+    "resource": {
+      "hello": [Function],
+    },
+  },
+  {
+    "locale": "ja",
+    "resource": {
+      "hello": [Function],
+    },
+  },
+]
+`;
diff --git a/packages/unplugin-vue-i18n/test/vite/custom-block.test.ts b/packages/unplugin-vue-i18n/test/vite/custom-block.test.ts
@@ -9,6 +9,33 @@ test('basic', async () => {
   expect(i18n.resource.en.hello(createMessageContext())).toEqual('hello world!')
 })
 
+test('json: exclude locales', async () => {
+  const { module } = await bundleAndRun('basic.vue', bundleVite, {
+    onlyLocales: ['ja']
+  })
+  expect(module.__i18n).toMatchSnapshot()
+  const i18n = module.__i18n.pop()
+  expect(i18n.resource.en).toBeUndefined()
+})
+
+test('yaml: exclude locales', async () => {
+  const { module } = await bundleAndRun('yaml.vue', bundleVite, {
+    onlyLocales: ['ja']
+  })
+  expect(module.__i18n).toMatchSnapshot()
+  const i18n = module.__i18n.pop()
+  expect(i18n.resource.en).toBeUndefined()
+})
+
+test('json5: exclude locales', async () => {
+  const { module } = await bundleAndRun('json5.vue', bundleVite, {
+    onlyLocales: ['ja']
+  })
+  expect(module.__i18n).toMatchSnapshot()
+  const i18n = module.__i18n.pop()
+  expect(i18n.resource.en).toBeUndefined()
+})
+
 test('yaml', async () => {
   const { module } = await bundleAndRun('yaml.vue', bundleVite)
   expect(module.__i18n).toMatchSnapshot()