Vue i18n Advanced Optimization

Hello, i just use this template and run it.

I can see a warning message in console.

vue-i18n.esm-bundler.js:46

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

Of course, we can turn off the warning like this.

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
    },
  },
})

Do we need set boolean literals to replace feature flag globals? (Sorry, i can not understand what do we need to do.)

---

In addition, I read the documentation of vue-i18n.

Improve performance and reduce bundle size with runtime build only

Should we add it as part of the vite template?

export default defineConfig({
  // ...
  alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
  },
})

If you need, I can create a PR for it.

Thanks.

[userquin]

Just add these 2 options on VueI18n plugin, the plugin will change the module for you and so you don’t have to map/resolve its internals:

    // https://github.com/intlify/vite-plugin-vue-i18n
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [path.resolve(__dirname, 'locales/**')],
    }),

[userquin]

@YunYouJun only on buid and runtimeOnly flag to true: https://github.com/intlify/bundle-tools/blob/main/packages/vite-plugin-vue-i18n/src/index.ts#L66