前端國際化解決方案

以前做前端國際化的專案的時候，因為業務不是很複雜，相關的需求一般都停留在文案的翻譯上，即國際化多語言，基本上使用相關的 i18n 外掛程式即可滿足開發的需求。但是隨著業務的迭代和需求複雜度的增加，這些 i18n 外掛程式不一定能滿足相關的需求開發。

這裡講一下技術棧基於 vue的實現，因此相關的解決方案也是基於 vue 以及相關的國際化外掛程式(vue-i18n)進行展開。

當專案比較簡單，沒有大量語言包檔案的時候，將語言包直接打包進業務**中是沒有太大問題的。

這個時候是需要考慮：

從 2.6.0 版本開始，webpack的 import 語法可以指定不同的模式解析動態匯入，具體可以參見文件(

因此結合 webpack 及 vue-i18n 提供的相關的 api 即可完成語言包的分包及非同步載入語言包，同時在執行時完成語言的切換的工作。

檔案目錄結構:

src|-
-components|-
-pages|-
-di18n
-locales
//專案應用語言包||
--zh-
cn.js|
|--en
-us.js
||--
pt-us.
js|--
.vue|-
-main
.js

main.js:

import vue from 'vue'
import vuei18n from 'vue-i18n'
vue.use(vuei18n)
const i18n = new vuei18n(
})function loadi18nmessages(lang) `).then(msg=> )
}loadi18nmessages('zh').then
(() => )
})

以上首先解決了語言包的分包和非同步載入的問題.

語言包做快取，以及相關的快取機制，思路

開啟頁面後，優先判斷 localstorage 是否存在對應語言包檔案，如果有的話，那麼直接從 localstorage 中同步的獲取語言包，然後完成頁面的渲染，如果沒有的話，那麼需要非同步從 cdn 獲取語言包，並將語言包快取到 localstorage 當中，然後完成頁面的渲染.

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

如果語言包發生了更新，那麼如何更新 localstorage 中快取的語言包？

首先在**編譯的環節，通過 webpack 外掛程式去完成每次編譯後，語言包的版本 hash 值的收集工作，同時注入到業務**當中。當頁面開啟，業務**開始執行後，首先會判斷業務**中語言包的版本和 localstorage 中快取的版本是否一致，如果一致則同步獲取對應語言包檔案，若不一致，則非同步獲取語言包

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

資料都是儲存到 localstorage 當中的， localstorage 因為是按網域名稱進行劃分的，所以如果多個國際化專案部署在同一網域名稱下，那麼可按專案名進行 namespace 的劃分，避免語言包/版本hash被覆蓋。

總結：初期對於國際化專案做的一些簡單的優化。總結一下就是：語言包單獨打包成 chunk，並提供非同步載入及 localstorage 儲存的功能，加快下次頁面開啟速度。

前端國際化解決方案

C 本地化國際化解決方案實現簡介

Struts國際化解讀

HIVE優化解決方案

前端國際化解決方案

C 本地化國際化解決方案實現簡介

Struts國際化解讀

HIVE優化 解決方案

相關推薦

HIVE優化解決方案