項(xiàng)目復(fù)盤：通過動(dòng)態(tài)腳本，實(shí)現(xiàn)按需加載語(yǔ)言包
大家好，我是前端西瓜哥，是一名前端開發(fā)。
最近做了一個(gè)將按需加載語(yǔ)言包的需求，有不少收獲，這里記錄一下。
改造前的項(xiàng)目
原來項(xiàng)目是將所有的語(yǔ)言包合并在一起，放到一個(gè) JSON 文件里然后被引入。
打包后的腳本里，有完整的語(yǔ)言包的代碼，導(dǎo)致打包文件非常大。理論上用戶只會(huì)使用一種語(yǔ)言，其他的語(yǔ)言沒有加載的必要。
目前來說項(xiàng)目只支持兩種語(yǔ)言，每個(gè)語(yǔ)言有文案 4000 多條。如果還是使用全量加載的話，以后支持的語(yǔ)言每多一個(gè)，打包后的文件就要膨脹一圈。
做語(yǔ)言包的拆分還是很有必要的。它可以減少加載資源的大小，減少首次頁(yè)面加載時(shí)間，提高用戶體驗(yàn)。
實(shí)現(xiàn)方案的選擇
實(shí)現(xiàn)按需加載語(yǔ)言包的方式很多，我了解到的有三種：
- 后端渲染：在請(qǐng)求時(shí)將單個(gè)語(yǔ)言包嵌入到 HTML 里。
- 動(dòng)態(tài) import：使用 ES6的 動(dòng)態(tài) import 語(yǔ)法。
- 動(dòng)態(tài)腳本：在腳本里創(chuàng)建一個(gè) script，添加到 DOM 樹上。
后端渲染的方案，其實(shí)是最快捷的
// 下面這一個(gè) script 是后端渲染的
<script>window.i18n = { 'apple': '蘋果' /* ... */ }</script>
<script src="app.js"></script>
請(qǐng)求 HTML 時(shí)，后端做渲染工作，給 HTML 加上語(yǔ)言包的內(nèi)容。
前端沒有什么改造的工作量，但問題是不能利用緩存。但這個(gè)問題其實(shí)也可以解決，就是后端生成好語(yǔ)言包 js 文件，將嵌入語(yǔ)言包內(nèi)容的方式改為 cdn 引入的方式，可以利用好緩存。
但這讓模板引擎的邏輯變得很重，cdn 上傳到哪里，如何維護(hù)也是個(gè)問題。
動(dòng)態(tài) import 方案
import('lang/zh-CN.js').then(() => {
ReactDOM.render();
});
使用 React 等框架打包出來單頁(yè)面應(yīng)用的文件通常很大，下載需要不少時(shí)間。
動(dòng)態(tài) import 必須在腳本整個(gè)下載完后，再執(zhí)行，所以這是一個(gè)串行下載的邏輯。
如果可以的話，我們希望語(yǔ)言包可以和業(yè)務(wù)代碼同時(shí)下載。此外，更重要的一點(diǎn)是，在動(dòng)態(tài) import 前，我們不能調(diào)用獲取文案的方法 getText。
我在改造項(xiàng)目代碼時(shí)，發(fā)現(xiàn)在我動(dòng)態(tài) import 語(yǔ)言包并 ReactDOM.render() 之前，有些模塊文件調(diào)用了getText 方法，因?yàn)樗鼈冏鳛槊杜e指直接暴露出來，沒有用函數(shù)封裝，被 import 時(shí)就直接執(zhí)行了。
語(yǔ)言包都沒加載，你執(zhí)行 getText 是拿不到文案的，這個(gè)方案我果斷放棄。
動(dòng)態(tài)腳本方案
<script>
(function(){
// 語(yǔ)言包 js 文件內(nèi)容為：window.i18n = { key1: value1 };
const i18nLangCDNs = {
"zh-CN": "/lang/zh-CN.1268ec6019c7a7bb7b27d1ecdadc3948.js",
"en-US": "/lang/en-US.e6c246ecf2b64be936a116706cdd6611.js",
};
let lang = getLang();
const script = document.createElement('script');
script.async = false;
script.src = i18nLangCDNs[lang];
document.querySelector('head').appendChild(script);
});
</script>
這種方案利用了腳本里創(chuàng)建腳本的方式。能在更前面的位置加載語(yǔ)言包腳本。
優(yōu)點(diǎn)是我們可以不需要做后端渲染的工作，讓選擇語(yǔ)言包的邏輯交給前端。但涉及到前端工程化，需要寫插件改變?cè)瓉淼募虞d腳本形式。
我們的項(xiàng)目使用了 webpack，如果用這個(gè)方案，就需要寫一個(gè) webpack 插件去改造 HtmlWebpackPlugin 的構(gòu)建流程。
目前來說，方案 1 和 方案 3 都是不錯(cuò)的。
但考慮到我們公司的前后端是分離的，后端的代碼實(shí)現(xiàn)對(duì)我來說其實(shí)是黑盒，我沒有權(quán)限也沒有能力去寫后端代碼。而項(xiàng)目是前端項(xiàng)目，最好還是讓前端來掌控維護(hù)。所以我最終選擇了方案 3。
方案1 和方案 2 的更具體介紹，可以看我的這篇文章：前端國(guó)際化，該如何實(shí)現(xiàn)按需加載語(yǔ)言包?
改造過程
原來項(xiàng)目打包后的 html 文件大致如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 業(yè)務(wù)代碼，語(yǔ)言包也在里面 -->
<script src="app.js"></script>
</body>
</html>
app.js 里有全量語(yǔ)言包的內(nèi)容。
改造后的 html 文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
(function(){
// 語(yǔ)言包 js 文件內(nèi)容為：window.i18n = { key1: value1 };
const i18nLangCDNs = {
"zh-CN": "/lang/zh-CN.1268ec6019c7a7bb7b27d1ecdadc3948.js",
"en-US": "/lang/en-US.e6c246ecf2b64be936a116706cdd6611.js",
};
let lang = getLang();
const script = document.createElement('script');
script.async = false;
script.src = i18nLangCDNs[lang];
document.querySelector('head').appendChild(script);
});
</script>
</head>
<body>
<!-- 為保持執(zhí)行順序，業(yè)務(wù)代碼也需要改為動(dòng)態(tài)加載形式 -->
<script>
<!-- app.js 文件已移除語(yǔ)言包 -->
['app.js'].forEach(function(src) {
const script = document.createElement('script');
script.async = false;
script.src = src;
document.body.appendChild(script);
});
</script>
</body>
我們語(yǔ)言包將 app.js 從中提取出來，并且分為多個(gè)語(yǔ)言包放到 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);
我們先確認(rèn)用戶使用的語(yǔ)言是什么。
如果我們不支持持久化設(shè)置，可以通過 navigator.language 或前端的其他地方獲取。
但通常用戶可以設(shè)置語(yǔ)言，這個(gè)語(yǔ)言標(biāo)識(shí)就要后端給，再請(qǐng)求一次用戶信息可太離譜了，所以這里還是需要后端給我們往 html 里嵌入用戶選擇的語(yǔ)言。然后我們從語(yǔ)言 cdn 列表里選我們需要的語(yǔ)言。
script 元素默認(rèn)會(huì)將 async 設(shè)置為 true，效果是腳本下載完立即執(zhí)行。需要將其改為 false，保證多個(gè)動(dòng)態(tài)腳本順序執(zhí)行。
文件名使用了哈希，是為了解決瀏覽器緩存問題。
執(zhí)行后，就會(huì)將語(yǔ)言包文案暴露在全局變量中。
業(yè)務(wù)代碼 app.js 也得改成動(dòng)態(tài)加載形式，如果原來的非動(dòng)態(tài)寫法，執(zhí)行時(shí)機(jī)就會(huì)早于語(yǔ)言包腳本。
這里涉及到了 script 的執(zhí)行時(shí)機(jī)，具體規(guī)則可以看我的這篇文章：script 的三種加載模式：默認(rèn)加載、defer、async。
原來的寫法
<script src="app.js"></script>
改造后
<script>
<!-- app.js 文件已移除語(yǔ)言包 -->
['app.js'].forEach(function(src) {
const script = document.createElement('script');
script.async = false;
script.src = src;
document.body.appendChild(script);
});
</script>
這樣我們就能保證先執(zhí)行語(yǔ)言包腳本，再執(zhí)行 app.js。
app.js 中的業(yè)務(wù)代碼執(zhí)行時(shí)，使用 getText 方法就能正常通過 key 獲取到對(duì)應(yīng)的文案。
這里 app.js 改為動(dòng)態(tài)的寫法后，需要腳本解析執(zhí)行后才下載腳本，可以考慮加個(gè) link preload 提前下載腳本。
link 的 preload 作用可以看我的這篇文章。
期間遇到的問題
思路并不復(fù)雜，但改造過程中做了很多工作，遇到了不少問題。這里簡(jiǎn)單列舉一下，不展開講了，到時(shí)候會(huì)考慮另寫文章討論。
- 我們項(xiàng)目的語(yǔ)言包是維護(hù)在在線表格上的，每次會(huì)通過腳本拉取數(shù)據(jù)，然后處理成 JSON 文件。我需要再寫一個(gè)腳本來處理這個(gè) JSON 文件，將其分成多個(gè)語(yǔ)言包，并生成功 TS 類型文件。
- 使用了 monorepo，我專門分了一個(gè) i18n 的包。
- 最難的是開發(fā)一個(gè) Webpack 插件，需要做到拷貝特定文件夾下的語(yǔ)言包，加上內(nèi)容哈希，放到構(gòu)建目錄下。這些帶有哈希的名字要保存下來，通過 HtmlWebpack的鉤子轉(zhuǎn)換為內(nèi)嵌 script 形式添加到 html 上。此外，還要將原來的打包文件 app.js 轉(zhuǎn)換為動(dòng)態(tài)加載的形式。
- 開發(fā)環(huán)境還是要全量加載語(yǔ)言包，方便測(cè)試。一個(gè)原因是 devServer 無法讀取到使用 copy 的文件，需要額外用 write-file-webpack-plugin，但項(xiàng)目用的 create-react-app 不太好改造。
- 改造 getText 獲取文案的方法，需要考慮開發(fā)和生產(chǎn)環(huán)境的不同。
- 我們還有個(gè)中間層的 nextjs 項(xiàng)目，我們的語(yǔ)言包要兼容該項(xiàng)目，所以里面還寫了判斷環(huán)境的邏輯，在 global 或 window 上掛載全局變量。
- 測(cè)試用例和 CI 補(bǔ)上一行引入語(yǔ)言包的邏輯。
