建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥，是一名前端開發(fā)。
創(chuàng)新互聯(lián)擁有十多年成都網(wǎng)站建設(shè)工作經(jīng)驗,為各大企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計服務(wù)，對于網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、重慶App定制開發(fā)、wap網(wǎng)站建設(shè)（手機版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、申請域名等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等網(wǎng)站化運作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項目的能力。
最近做了一個將按需加載語言包的需求，有不少收獲，這里記錄一下。
改造前的項目
原來項目是將所有的語言包合并在一起，放到一個 JSON 文件里然后被引入。
打包后的腳本里，有完整的語言包的代碼，導(dǎo)致打包文件非常大。理論上用戶只會使用一種語言，其他的語言沒有加載的必要。
目前來說項目只支持兩種語言，每個語言有文案 4000 多條。如果還是使用全量加載的話，以后支持的語言每多一個，打包后的文件就要膨脹一圈。
做語言包的拆分還是很有必要的。它可以減少加載資源的大小，減少首次頁面加載時間，提高用戶體驗。
實現(xiàn)方案的選擇
實現(xiàn)按需加載語言包的方式很多，我了解到的有三種：
- 后端渲染：在請求時將單個語言包嵌入到 HTML 里。
- 動態(tài) import：使用 ES6的 動態(tài) import 語法。
- 動態(tài)腳本：在腳本里創(chuàng)建一個 script，添加到 DOM 樹上。
后端渲染的方案，其實是最快捷的
// 下面這一個 script 是后端渲染的
請求 HTML 時，后端做渲染工作，給 HTML 加上語言包的內(nèi)容。
前端沒有什么改造的工作量，但問題是不能利用緩存。但這個問題其實也可以解決，就是后端生成好語言包 js 文件，將嵌入語言包內(nèi)容的方式改為 cdn 引入的方式，可以利用好緩存。
但這讓模板引擎的邏輯變得很重，cdn 上傳到哪里，如何維護也是個問題。
動態(tài) import 方案
import('lang/zh-CN.js').then(() => {
ReactDOM.render();
});使用 React 等框架打包出來單頁面應(yīng)用的文件通常很大，下載需要不少時間。
動態(tài) import 必須在腳本整個下載完后，再執(zhí)行，所以這是一個串行下載的邏輯。
如果可以的話，我們希望語言包可以和業(yè)務(wù)代碼同時下載。此外，更重要的一點是，在動態(tài) import 前，我們不能調(diào)用獲取文案的方法 getText。
我在改造項目代碼時，發(fā)現(xiàn)在我動態(tài) import 語言包并 ReactDOM.render() 之前，有些模塊文件調(diào)用了getText 方法，因為它們作為枚舉指直接暴露出來，沒有用函數(shù)封裝，被 import 時就直接執(zhí)行了。
語言包都沒加載，你執(zhí)行 getText 是拿不到文案的，這個方案我果斷放棄。
動態(tài)腳本方案
這種方案利用了腳本里創(chuàng)建腳本的方式。能在更前面的位置加載語言包腳本。
優(yōu)點是我們可以不需要做后端渲染的工作，讓選擇語言包的邏輯交給前端。但涉及到前端工程化，需要寫插件改變原來的加載腳本形式。
我們的項目使用了 webpack，如果用這個方案，就需要寫一個 webpack 插件去改造 HtmlWebpackPlugin 的構(gòu)建流程。
目前來說，方案 1 和 方案 3 都是不錯的。
但考慮到我們公司的前后端是分離的，后端的代碼實現(xiàn)對我來說其實是黑盒，我沒有權(quán)限也沒有能力去寫后端代碼。而項目是前端項目，最好還是讓前端來掌控維護。所以我最終選擇了方案 3。
方案1 和方案 2 的更具體介紹，可以看我的這篇文章：前端國際化，該如何實現(xiàn)按需加載語言包?
改造過程
原來項目打包后的 html 文件大致如下。
Document
app.js 里有全量語言包的內(nèi)容。
改造后的 html 文件如下：
Document
我們語言包將 app.js 從中提取出來，并且分為多個語言包放到 js 文件，如 zh-CN.js、en-US.js，在 app.js 之前執(zhí)行。
let lang = getLang();
const script = document.createElement('script');
script.async = false;
script.src = i18nLangCDNs[lang];
document.querySelector('head').appendChild(script);
我們先確認用戶使用的語言是什么。
如果我們不支持持久化設(shè)置，可以通過 navigator.language 或前端的其他地方獲取。
但通常用戶可以設(shè)置語言，這個語言標(biāo)識就要后端給，再請求一次用戶信息可太離譜了，所以這里還是需要后端給我們往 html 里嵌入用戶選擇的語言。然后我們從語言 cdn 列表里選我們需要的語言。
script 元素默認會將 async 設(shè)置為 true，效果是腳本下載完立即執(zhí)行。需要將其改為 false，保證多個動態(tài)腳本順序執(zhí)行。
文件名使用了哈希，是為了解決瀏覽器緩存問題。
執(zhí)行后，就會將語言包文案暴露在全局變量中。
業(yè)務(wù)代碼 app.js 也得改成動態(tài)加載形式，如果原來的非動態(tài)寫法，執(zhí)行時機就會早于語言包腳本。
這里涉及到了 script 的執(zhí)行時機，具體規(guī)則可以看我的這篇文章：script 的三種加載模式：默認加載、defer、async。
原來的寫法
改造后
這樣我們就能保證先執(zhí)行語言包腳本，再執(zhí)行 app.js。
app.js 中的業(yè)務(wù)代碼執(zhí)行時，使用 getText 方法就能正常通過 key 獲取到對應(yīng)的文案。
這里 app.js 改為動態(tài)的寫法后，需要腳本解析執(zhí)行后才下載腳本，可以考慮加個 link preload 提前下載腳本。
link 的 preload 作用可以看我的這篇文章。
期間遇到的問題
思路并不復(fù)雜，但改造過程中做了很多工作，遇到了不少問題。這里簡單列舉一下，不展開講了，到時候會考慮另寫文章討論。
- 我們項目的語言包是維護在在線表格上的，每次會通過腳本拉取數(shù)據(jù)，然后處理成 JSON 文件。我需要再寫一個腳本來處理這個 JSON 文件，將其分成多個語言包，并生成功 TS 類型文件。
- 使用了 monorepo，我專門分了一個 i18n 的包。
- 最難的是開發(fā)一個 Webpack 插件，需要做到拷貝特定文件夾下的語言包，加上內(nèi)容哈希，放到構(gòu)建目錄下。這些帶有哈希的名字要保存下來，通過 HtmlWebpack的鉤子轉(zhuǎn)換為內(nèi)嵌 script 形式添加到 html 上。此外，還要將原來的打包文件 app.js 轉(zhuǎn)換為動態(tài)加載的形式。
- 開發(fā)環(huán)境還是要全量加載語言包，方便測試。一個原因是 devServer 無法讀取到使用 copy 的文件，需要額外用 write-file-webpack-plugin，但項目用的 create-react-app 不太好改造。
- 改造 getText 獲取文案的方法，需要考慮開發(fā)和生產(chǎn)環(huán)境的不同。
- 我們還有個中間層的 nextjs 項目，我們的語言包要兼容該項目，所以里面還寫了判斷環(huán)境的邏輯，在 global 或 window 上掛載全局變量。
- 測試用例和 CI 補上一行引入語言包的邏輯。
名稱欄目：項目復(fù)盤：通過動態(tài)腳本，實現(xiàn)按需加載語言包
網(wǎng)頁鏈接：http://www.5511xx.com/article/cdcsijd.html
