重试动态导入
使用缓存突袭和指数回放重试动态导入
你知道吗 HTML 规格 要缓存失败的动态导入分辨率吗 ? 结果,大多数人一旦在生产中使用动态进口的应用软件,并在一段时间后开始看到奇怪错误,就会知道这一点。 我也没有,我最后做了 很多调试和咆哮 在我发现之前收到用户的神秘错误报告 什么工作组的问题 确切地说,这种情况。 由于从2021年起,这一直处于一个站台,我最终创建了这个图书馆来围绕问题开展工作.
这个软件包原本是阿隆·米兹拉希作品的叉子,但新代码不再使用阿隆的方法,这种方法依赖于解析 Chromium特有出错消息,而新取法在Firefox等浏览器中也起作用.
已完成的改进:
- 单位测试
- XQ 支持非铬浏览器( 如 Firefox)
- QQ 树可摇动( 如果您只是使用非反应比特, 请不要在反应中拉动)
- qq 通过不等待第一次缓存破解尝试来加快对受影响客户的解析
- 将导出固定为同时使用节点Next和"经典"模块分辨率与 Typescript工作
- · 双重出口(目前只是无害环境管理),如果想要,大声喊出来(我们已经生产了
*.cjs文档)
为什么不直接抓住失败并重新装入页面?
在 Firefox 中,虽然效果很好,但在基于 Chromium (Edge, Chrome,...) 的浏览器中,一个失败的模块导入是 已缓存 而失败是 粘着:在重新装入或浏览器重启时(每Chrome 113次)没有重试. 这是 真实 失败, 而不是 DevTool URL 屏蔽, 就是 不粘着无论出于什么原因.
德莫吗?
- 打开 在 Github 页面上部署的演示应用程序
- 打开 DevTools 并刷新页面
- 右键点击昂贵的 Confession. * url 并选择屏蔽它
- 在 DevTools 的网络标签中刷新并查看网络请求失败
- 解开url,再看它工作
如果你想看到上面提到的粘滞行为,设置 Charles Proxy及其"断点"功能 能够有选择地阻止或接受请求。 干得不错!
限制
过境进口:改为 本条 了解细节 说明动态进口可能如何失败,以及这如何解决其中一些用途。 一种无法解决的用法是,如果过渡性 依赖性不应加载 .
安装
npm i @fatso83/retry-dynamic-import
使用量
包有两大出口
export const dynamicImportWithRetry // default implementation with 5 retries
export const createDynamicImportWithRetry // factory to make your own version of dynamicImportWithRetry
香草 JS 乌蒂尔
任何框架内的工作
import { dynamicImportWithRetry } from "@fatso83/retry-dynamic-import";
const myModule = dynamicImportWithRetry(() => import("./my-module")); // this works regardless of framework, lib, etc
参见单位测试或执行它支持什么选项.
自定义策略
这个 createDynamicImportWithRetry 工厂最近有了一个新的功能 允许您通过 您的自定义策略 用于处理进口,而不是预先界定的。 测试中显示的一个具体的使用案例是,这为支持重复试验打开了大门 动态 导入路径.
// ONE-TIME SETUP
const moduleSpecifierSymbol = Symbol()
const lookupUsingSymbolInImporter: UrlStrategy = (_, importer) =>
moduleSpecifierSymbol in importer
? String(importer[moduleSpecifierSymbol])
: null;
const customRetryImport = createDynamicImportWithRetry(3, {strategy: lookupUsingSymbolInImporter})
// ...
// USE
// This can now be used with dynamically created paths like this
const path = readFromUser();
const importer = Object.assign(() => import(path), {
[moduleSpecifierSymbol]: path,
});
await customRetryImport(importer)
反应工具
亚瑟利,你可以 import reactLazyWithRetry from '@fatso83/retry-dynamic-import/react-lazy' 用于取代 React.lazy () 用于用回推器懒惰地导入的功能。 在1版中,* 这一点在根上暴露,但大多数捆绑者是 无法树摇反射,所以我决定做一个突破 更改版本2, 暴露它的子路径导出.
反应是可选的 此软件包的依赖性 , 这意味着您可以通过指定来使用 Svelte 或 VanillaJS 而无需拉入额外的依赖性 npm install --omit=optional但是,如果你使用 react-lazy 子导出您当然需要在您的依赖树中反应 :
懒惰与重试反应
上面的薄薄包裹,呼唤 React.lazy()
const LazyAbout = reactLazyWithRetry(() => import("./components/About"));
const LazyHome = reactLazyWithRetry(() => import("./components/Home"));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<LazyHome />} />
<Route path="/about" element={<LazyAbout />} />
</Routes>
</Suspense>
</Router>
);
捐款
请吧!
- 运行测试 :
DEBUG=dynamic-import:* npm t -- --watch(env var 只是用于动词输出)
发布补丁发布
承诺进行所有修改 main 和 npm 认证配置, 运行 :
npm version patch
这是完整的释放命令。 这个 preversion 钩子安装演示
和消费者的依赖性 与他们的锁文件 npm ci,然后进行单元测试、建筑测试、消费者测试和
包装检查。 npm 递增版本并创建版本
和标签。 这个 postversion 钩头重建新版本,验证
实际的柏油球, 发布柏油球到npm, 更新演示在 GitHub Pages,
并推出树枝和标签.
Npm 认证缺失或过期, 请运行 npm login 先说 时间可能
还请您认证出版操作.
不单独运行 npm publish 从源检出。 释放
命令从 pkg/ 换句话说.
不出版包装
使用 npm run pack:release 在 pkg/
不发布或更改版本.
为了单独检查: npm test, (中文(简体) ), npm run build, (中文(简体) ),
npm run test-consumers,以及 npm run test:package。软件包测试安装
实际数 .tgz 成为临时消费者,并核实出口的运行时间,
TypeScript 导入, 并重试 Vite 默认生产后的行为
微调化。 直接从源检出中包装或发布为
因为它的广告条目文件只存在于 pkg/ 建会后.