项目复盘：通过动态脚本，实现按需加载语言包

大家好，项目我是复盘前端西瓜哥，是通过一名前端开发。

最近做了一个将按需加载语言包的动态需求，有不少收获，脚本加载这里记录一下。实现

原来项目是将所有的语言包合并在一起，放到一个 JSON 文件里然后被引入。项目

打包后的复盘脚本里，有完整的通过语言包的代码，导致打包文件非常大。动态理论上用户只会使用一种语言，脚本加载其他的实现语言没有加载的必要。

目前来说项目只支持两种语言，按需每个语言有文案 4000 多条。项目如果还是使用全量加载的话，以后支持的语言每多一个，打包后的文件就要膨胀一圈。

做语言包的香港云服务器拆分还是很有必要的。它可以减少加载资源的大小，减少首次页面加载时间，提高用户体验。

实现按需加载语言包的方式很多，我了解到的有三种：

后端渲染：在请求时将单个语言包嵌入到 HTML 里。动态 import：使用 ES6的 动态 import 语法。动态脚本：在脚本里创建一个 script，添加到 DOM 树上。后端渲染的方案，其实是最快捷的// 下面这一个 script 是后端渲染的

请求 HTML 时，后端做渲染工作，给 HTML 加上语言包的内容。

前端没有什么改造的工作量，但问题是不能利用缓存。但这个问题其实也可以解决，就是后端生成好语言包 js 文件，b2b供应网将嵌入语言包内容的方式改为 cdn 引入的方式，可以利用好缓存。

但这让模板引擎的逻辑变得很重，cdn 上传到哪里，如何维护也是个问题。

动态 import 方案import(lang/zh-CN.js).then(() => {

ReactDOM.render();

使用 React 等框架打包出来单页面应用的文件通常很大，下载需要不少时间。

动态 import 必须在脚本整个下载完后，再执行，所以这是一个串行下载的逻辑。

如果可以的话，我们希望语言包可以和业务代码同时下载。此外，更重要的一点是，在动态 import 前，我们不能调用获取文案的方法 getText。

我在改造项目代码时，发现在我动态 import 语言包并 ReactDOM.render() 之前，有些模块文件调用了getText 方法，因为它们作为枚举指直接暴露出来，没有用函数封装，被 import 时就直接执行了。网站模板

语言包都没加载，你执行 getText 是拿不到文案的，这个方案我果断放弃。

动态脚本方案

(function(){

// 语言包 js 文件内容为：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);

});

这种方案利用了脚本里创建脚本的方式。能在更前面的位置加载语言包脚本。

优点是我们可以不需要做后端渲染的工作，让选择语言包的逻辑交给前端。但涉及到前端工程化，需要写插件改变原来的加载脚本形式。

我们的项目使用了 webpack，如果用这个方案，就需要写一个 webpack 插件去改造 HtmlWebpackPlugin 的构建流程。

目前来说，方案 1 和 方案 3 都是不错的。

但考虑到我们公司的前后端是分离的，后端的代码实现对我来说其实是黑盒，我没有权限也没有能力去写后端代码。而项目是前端项目，最好还是让前端来掌控维护。所以我最终选择了方案 3。

方案1 和方案 2 的更具体介绍，可以看我的这篇文章：前端国际化，该如何实现按需加载语言包?

原来项目打包后的 html 文件大致如下。

app.js 里有全量语言包的内容。

改造后的 html 文件如下：

(function(){

// 语言包 js 文件内容为：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);

});

[app.js].forEach(function(src) {

const script = document.createElement(script);

script.async = false;

script.src = src;

document.body.appendChild(script);

});

我们语言包将 app.js 从中提取出来，并且分为多个语言包放到 js 文件，如 zh-CN.js、en-US.js，在 app.js 之前执行。

let lang = getLang();

const script = document.createElement(script);

script.async = false;

script.src = i18nLangCDNs[lang];

我们先确认用户使用的语言是什么。

如果我们不支持持久化设置，可以通过 navigator.language 或前端的其他地方获取。

但通常用户可以设置语言，这个语言标识就要后端给，再请求一次用户信息可太离谱了，所以这里还是需要后端给我们往 html 里嵌入用户选择的语言。然后我们从语言 cdn 列表里选我们需要的语言。

script 元素默认会将 async 设置为 true，效果是脚本下载完立即执行。需要将其改为 false，保证多个动态脚本顺序执行。

文件名使用了哈希，是为了解决浏览器缓存问题。

执行后，就会将语言包文案暴露在全局变量中。

业务代码 app.js 也得改成动态加载形式，如果原来的非动态写法，执行时机就会早于语言包脚本。

这里涉及到了 script 的执行时机，具体规则可以看我的这篇文章：script 的三种加载模式：默认加载、defer、async。

原来的写法

改造后

[app.js].forEach(function(src) {

const script = document.createElement(script);

script.async = false;

script.src = src;

document.body.appendChild(script);

});

这样我们就能保证先执行语言包脚本，再执行 app.js。

app.js 中的业务代码执行时，使用 getText 方法就能正常通过 key 获取到对应的文案。

这里 app.js 改为动态的写法后，需要脚本解析执行后才下载脚本，可以考虑加个 link preload 提前下载脚本。

link 的 preload 作用可以看我的这篇文章。

思路并不复杂，但改造过程中做了很多工作，遇到了不少问题。这里简单列举一下，不展开讲了，到时候会考虑另写文章讨论。

最新评论