以前做前端國際化的項目的時候，因為業(yè)務不是很復雜，相關的需求一般都停留在文案的翻譯上，即國際化多語言，基本上使用相關的 I18n 插件即可滿足開發(fā)的需求。但是隨著業(yè)務的迭代和需求復雜度的增加，這些 I18n 插件不一定能滿足相關的需求開發(fā)。

這里講一下技術棧基于 Vue的實現(xiàn)，因此相關的解決方案也是基于 Vue 以及相關的國際化插件(vue-i18n)進行展開。

---

背景

1- 沒有大量語言包文件

當項目比較簡單，沒有大量語言包文件的時候，將語言包直接打包進業(yè)務代碼中是沒有太大問題的。

2- 有大量語言包文件

這個時候是需要考慮：

• 語言包單獨打包。
• 減少業(yè)務代碼體積 。
• 通過異步加載的方式去使用。
• 考慮到國際化語言包相對來說是非高頻修改的內容，因此可以考慮將語言包進行緩存，每次頁面渲染時優(yōu)先從緩存中獲取語言包來加快頁面打開速度。

---

解決方案

從 2.6.0 版本開始，webpack的 import 語法可以指定不同的模式解析動態(tài)導入，具體可以參見文檔(https://webpack.docschina.org/api/module-methods/#import-)
因此結合 webpack 及 vue-i18n 提供的相關的 API 即可完成語言包的分包及異步加載語言包，同時在運行時完成語言的切換的工作。

文件目錄結構:

src |--components |--pages |--di18n-locales // 項目應用語言包 | |--zh-CN.js | |--en-US.js | |--pt-US.js |--App.vue |--main.js

main.js:

import Vue from 'vue' import VueI18n from 'vue-i18n' import App from './App.vue'Vue.use(VueI18n)const i18n = new VueI18n({locale: 'en',messages: {} })function loadI18nMessages(lang) {return import(`./di18n-locales/${lang}`).then(msg => {i18n.setLocaleMessage(lang, msg.default)i18n.locale = langreturn Promise.resolve()}) }loadI18nMessages('zh').then(() => {new Vue({el: '#app',i18n,render: h => h(App)}) })

以上首先解決了語言包的分包和異步加載的問題.

---

語言包做緩存，以及相關的緩存機制，思路

打開頁面后，優(yōu)先判斷 localStorage 是否存在對應語言包文件，如果有的話，那么直接從 localStorage 中同步的獲取語言包，然后完成頁面的渲染，如果沒有的話，那么需要異步從 CDN 獲取語言包，并將語言包緩存到 localStorage 當中，然后完成頁面的渲染.

---

語言包做緩存，以及相關的緩存機制, 需要考慮到以下的問題

如果語言包發(fā)生了更新，那么如何更新 localStorage 中緩存的語言包？

首先在代碼編譯的環(huán)節(jié)，通過 webpack 插件去完成每次編譯后，語言包的版本 hash 值的收集工作，同時注入到業(yè)務代碼當中。當頁面打開，業(yè)務代碼開始運行后，首先會判斷業(yè)務代碼中語言包的版本和 localStorage 中緩存的版本是否一致，如果一致則同步獲取對應語言包文件，若不一致，則異步獲取語言包

在 localStorage 中版本號及語言包的存儲方式？

數(shù)據都是存儲到 localStorage 當中的， localStorage 因為是按域名進行劃分的，所以如果多個國際化項目部署在同一域名下，那么可按項目名進行 namespace 的劃分，避免語言包/版本hash被覆蓋。

---

總結：

初期對于國際化項目做的一些簡單的優(yōu)化。總結一下就是：語言包單獨打包成 chunk，并提供異步加載及 localStorage 存儲的功能，加快下次頁面打開速度。

總結

以上是生活随笔為你收集整理的前端国际化解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。