Optimization #

Improve performance and reduce bundle size with runtime build only #

As described in "installation" section, Vue I18n offer the following two built ES modules for Bundler.

• message compiler + runtime: vue-i18n.esm-bundler.js
• runtime only: vue-i18n.runtime.esm-bundler.js

For bundler, it’s configured to bundle vue-i18n.esm-bundler.js by default. If you want to reduce the bundle size further, you can configure the bundler to use vue-i18n.runtime.esm-bundler.js, which is runtime only.

The use of this ES Module means that all locale messages have to pre-compile to Message functions.

vite #

In vite, use alias option as below:

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  // ...
  alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
  },
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ],
  // ...
})

webpack #

In webpack, use resolve.alias as below:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
    }
  },
  // ...
}

rollup #

In rollup, use @rollup/plugin-alias as below:

import path from 'path'
import alias from '@rollup/plugin-alias'

module.exports = {
  // ...
  plugins: [
    alias({
      entries: {
        'vue-i18n': path.resolve(__dirname, './node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js')
      }
    })
  ],
  // ...
}

Quasar CLI #

No need to do anything. Quasar CLI takes care of the optimizations for you.

Reduce bundle size with feature build flags #

The esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

• __VUE_I18N_FULL_INSTALL__ (enable/disable, in addition to vue-i18n APIs, components and directives all fully support installation: true)
• __VUE_I18N_LEGACY_API__ (enable/disable vue-i18n legacy style APIs support, default: true)
• __INTLIFY_PROD_DEVTOOLS__ (enable/disable @intlify/devtools support in production, default: false)

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree shaking in the final bundle. To configure these flags:

• webpack: use DefinePlugin
• Rollup: use @rollup/plugin-replace
• Vite: configured by default, but can be overwritten using the define option
• Quasar CLI: configured by default, but can be overwritten using quasar.conf.js > build > env option

Pre translations with extensions #

You can use pre-translation(server-side rendering) with vue-i18n-extensions package.

About how to usage, see here.