feat: bundling optimizations (#41)

* improvement: support named & default exporting

* feat: bundling optimizations

Author: kazupon

README.md

@@ -9,6 +9,7 @@ Vite plugin for Vue I18n
 ## :star: Features
 - i18n resources pre-compilation
 - i18n custom block
+- Bundling optimizations
 
 ## :cd: Installation
 
@@ -24,6 +25,10 @@ $ npm i --save-dev @intlify/vite-plugin-vue-i18n
 $ yarn add -D @intlify/vite-plugin-vue-i18n
 ```
 
+## :warning: Notice
+
+When this plugin is installed, Vue I18n can only use the Composition API, and if you want to use the Legacy API, you need to set the `compositionOnly` option to `false`.
+
 
 ## :rocket: Usage
 
@@ -122,6 +127,14 @@ ja:
 </i18n>
 ```
 
+### Bundling optimizations
+
+vite-plugin-vue-i18n allows you to specify options in the plugin option to support bundling size optimization provided by vue-i18n.
+
+The same thing can be [configured](https://vue-i18n-next.intlify.dev/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags) with the `define` option, but the plugin option is more friendly. Especially if you are using typescript, you can use intelisense.
+
+About details, See the below section
+
 
 ## :wrench: Options
 
@@ -141,6 +154,35 @@ ja:
 
   Note `json` resources matches this option, it will be handled **before the internal json plugin of Vite, and will not be processed afterwards**, else the option doesn't match, the Vite side will handle.
 
+### `runtimeOnly`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether or not to use Vue I18n **runtime-only**, set in the `vue-i18n` field of Vite `alias` option.
+
+  If `false` is specified, Vue I18n (vue-i18n) package.json `module` field will be used.
+
+  For more details, See [here](https://vue-i18n-next.intlify.dev/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only)
+
+### `compositionOnly`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether to make vue-i18n's API only composition API. **By default the legacy API is tree-shaken.**
+
+  For more details, See [here](https://vue-i18n-next.intlify.dev/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags)
+
+### `fullInstall`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether to install the full set of APIs, components, etc. provided by Vue I18n. By default, all of them will be installed.
+
+  If `false` is specified, **buld-in components and directive will not be installed in vue and will be tree-shaken.**
+
 ### `forceStringify`
 
 - **Type:** `boolean`

examples/vite.config.ts

@@ -16,7 +16,8 @@ export default defineConfig({
   plugins: [
     vue(),
     vueI18n({
-      include: path.resolve(__dirname, './**/locales/**')
+      include: path.resolve(__dirname, './**/locales/**'),
+      compositionOnly: false
     })
   ]
 })

src/index.ts

@@ -1,6 +1,16 @@
+;(async () => {
+  try {
+    await import('vue-i18n')
+  } catch (e) {
+    throw new Error(
+      '@intlify/vite-plugin-vue-i18n requires vue-i18n to be present in the dependency tree.'
+    )
+  }
+})()
+
 import { promises as fs } from 'fs'
 import path from 'path'
-import { isEmptyObject, isString } from '@intlify/shared'
+import { isBoolean, isEmptyObject, isString } from '@intlify/shared'
 import { createFilter } from '@rollup/pluginutils'
 import { generateJSON, generateYAML } from '@intlify/cli'
 import { debug as Debug } from 'debug'
@@ -18,11 +28,42 @@ function pluginI18n(
   debug('plugin options:', options)
 
   const filter = createFilter(options.include)
+  const runtimeOnly = isBoolean(options.runtimeOnly)
+    ? options.runtimeOnly
+    : true
+  const compositionOnly = isBoolean(options.compositionOnly)
+    ? options.compositionOnly
+    : true
+  const fullIinstall = isBoolean(options.fullInstall)
+    ? options.fullInstall
+    : true
   let config: ResolvedConfig | null = null
 
   return {
     name: 'vite-plugin-vue-i18n',
 
+    config() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const partialConfig: any = { define: {}, alias: {} }
+
+      if (runtimeOnly) {
+        partialConfig.alias['vue-i18n'] =
+          'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+        debug('set vue-i18n alias')
+      }
+
+      if (compositionOnly) {
+        partialConfig.define['__VUE_I18N_LEGACY_API__'] = false
+        debug('set __VUE_I18N_LEGACY_API__ is `false`')
+      }
+      if (!fullIinstall) {
+        partialConfig.define['__VUE_I18N_FULL_INSTALL__'] = false
+        debug('set __VUE_I18N_FULL_INSTALL__ is `false`')
+      }
+
+      return partialConfig
+    },
+
     configResolved(_config: ResolvedConfig) {
       // store config
       config = _config
@@ -52,7 +93,7 @@ function pluginI18n(
 
     async transform(code: string, id: string) {
       const { filename, query } = parseVueRequest(id)
-      debug('transform', id, code, JSON.stringify(query))
+      debug('transform', id, JSON.stringify(query))
 
       const parseOptions = getOptions(
         filename,

src/options.ts

@@ -1,4 +1,7 @@
 export type VitePluginVueI18nOptions = {
   forceStringify?: boolean
+  runtimeOnly?: boolean
+  compositionOnly?: boolean
+  fullInstall?: boolean
   include?: string | string[]
 }