介绍
对于 TO C 的应用，用户网络千差万别，总有各种网络问题导致资源加载失败，使得访问时出现白屏，样式错乱等。资源加载重试，则是提高用户体验中重要的一环。
最近开始尝试用 Vue 整套技术体系进行开发。如何在 Vue 中做资源加载重试？
资源分类
目前常见的前端资源分为
script 脚本
css 样式文件
img 图片
background-img 背景图
而在 webpack 构建体系里，根据加载方式可以细分为
内联到 html 的 script,link 标签
img 图片
import() 或 require.ensure 异步加载的 chunk，通过 webpack 内置的加载器完成
实践方案
内联资源重试
assets-reload
通过 script, link, img 等标签上的 onerror 回调来进行资源加载重试，并且替换的 URL 规则可定制。而背景图则是读取样式表的规则，匹配到 background-img，则重新插入一条 background-img 样式，用于重试。
具体的实现欢迎点击该模块参考。
另外配合 webpack 构建自动化的能力，将这些 onerror 函数进行绑定。
script
通过这个模块，再利用 script-ext-html-webpack-plugin 配置 script 的 onerror 属性
new ScriptExtHtmlWebpackPlugin({
custom: {
test: /.js$/,
attribute: ‘onerror=”attackCatch(this)”‘
}
})
link
另外写个简单的插件将 head 处内联的 link 标签加上 onerror 属性。
class MyPlugin {
apply (compiler) {
compiler.hooks.compilation.tap(‘css-attr-plugin’, (compilation) => {
compilation.hooks.htmlWebpackPluginAlterAssetTags
.tapAsync(‘myPlugin’, function (data, cb) {
data.head.forEach(el=>{
if(el.tagName === ‘link’){
el.attributes.onerror = ‘attackCatch(this)’;
}
})
cb(null ,data);
});
})
}
}
module.exports = MyPlugin
img
img 目前暂未找到适配的插件，稍后将自行添加对应的插件。也欢迎各位推荐
background-img 背景图
背景图这一块，则因为没有事件监听，只能进行全量替换，目前的应用仅在测试域名环境下，将所有背景图资源替换为当前域名下。
webpack 内置异步加载器
webpack-plugin-import-retry
阅读了 webpack 资源加载器部分的代码，重写了下加载器部分，实现了重试的能力。同时支持，传入格式化 URL 函数用于自定义重试时的链接。
对加载失败的 chunk, 进行重试。
一个 chunk，有时候会包括 JS 及 CSS 资源，其中一个加载失败便会发起重试，直到有一个资源重试了 2 次就判断为失败。
通过资源加载重试，可大大减少 router 中, 加载异步的页面文件时，失败而导致白屏的问题。
/******/ __webpack_require__.oldE = __webpack_require__.e;
/******/ __webpack_require__.e = function newRequireEnsure (chunkId, options) {
/******/ return __webpack_require__.oldE(chunkId, options).then(function () {}, function (err) {
/******/ console.error(err);
/******/ var type;
/******/ if (/.*.css??/.test(err.request)) {
/******/ type = ‘LINK’;
/******/ } else if (/.*.js??.*/.test(err.request)) {
/******/ type = ‘SCRIPT’;
/******/ }
/******/ if (options === undefined) {
/******/ options = {
/******/ LINK: 0,
/******/ SCRIPT: 0
/******/ };
/******/ }
/******/ options[type]++;
/******/ // 最小值为 1
/******/ if (options[type] <= 2) {
/******/ return newRequireEnsure(chunkId, options);
/******/ }
/******/ })
/******/ }
重试规则
我们项目中，前端部署的架构为将前端项目文件发布到自己的静态资源服务器，CDN 再来进行回源请求文件。
URL 仅为域名不同，路径相同。
因此，我们的重试规则为 加上 reloadAssets= 1 参数，用于标识是第几次重试。
第二次重试时，将 CDN 域名替换为当前域名。
因为 CDN 域名也会有不稳定的时候，将 CDN 域名替换为当前访问的域名，成功率会高些。
因为不同业务的 CDN 资源替换为主站资源路径未必相同。因此都支持自定义规则。
测试域名应用
对于测试环境，我们一般会启用一个测试域名用于访问。
此时，增量文件尚未发布到 CDN，导致访问测试域名时，增量文件请求不到，而为此提前将增量文件发布到线上，则比较麻烦。
因此，我们的自定义规则内，会添加是否为测试环境的判断，如果为测试环境，第一次重试的时候就直接替换为当前的测试域名进行访问。
以此达到同一套代码适配不同域名。