vue优化 I18n多语言按需引入

项目支持了中英文两种语言，最后打包下来的翻译文件体积居然接近1M，这严重拖慢了首页的加载速度。

实际上我并不需要一下加载所有的翻译内容。在加载首页时，只用引入首页需要的翻译就行了，同样，在加载其他路由时，也只需引入相对应路由的翻译。

这样就得按路由来拆分翻译了

创建language文件夹，在里面存放不同的路由的翻译，假设有路由/home和/product，那languge目录结构应该是这样：

- language
  - home
    - en.js
    - zh.js
  - product
    - en.js
    - zh.js

  - index.js

然后在每次进入路由的时候，也就是beforeEach钩子函数里，用import动态导入相对应的翻译文件：

router.beforeEach(async (to, from, next) => {

  // 加载翻译
  const path = to.path.substring(1)
  await loadLocaleMessages(path)

})

loadLocaleMessages是language目录下的index.js文件导出的用于加载翻译的函数，index.js内容如下：

// 使用插件
import { createI18n } from "vue-i18n"
import { nextTick } from "vue"

const i18n = createI18n({
  // legacy: false,
  locale: 'zh',
  messages: {
    zh: { ...zh },
    en: { ...en },
  }
})

// 按路由加载语言
export async function loadLocaleMessages(path, locale = i18n.global.locale) {
  try {
    const { default: messages } = await import(/* webpackChunkName: "locale-[request]" */ `./${path}/${locale}.js`)

    // 合并
    i18n.global.mergeLocaleMessage(locale, messages)
  } catch (error) {
    console.log(error.messages)
  }

  return nextTick()
}

export default i18n

这样每次进入路由时，就会按需引入相对应的翻译文件了，不会一次性加载所有的翻译文件。