Vue i18n Advanced Optimization

[YunYouJun]

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/**')],
    }),

[YunYouJun]

Okay, thank you, I see.

Should this be added as a default configuration for vitesse?

[userquin]

@antfu I can make a PR, I have it prepared on local...

[userquin]

Okay, thank you, I see.

Should this be added as a default configuration for vitesse?

You still have the warning on dev, since the plugin will omit the module replacement...

[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

[userquin]

If you want to remove the warning on dev, you need to add the alias you propose...

[userquin]

@antfu these 2 options are by default true so we dont need to change it, I just explicity set to true on the plugin to be used with vue 3, but for vue 2 will not work, I miss you change adding vue-demi so maybe we need to add some hint on docs