小编edi*_*y17的帖子

当任何动态导入无法加载文件时,如何手动加载 webpack 异步块?

webpack 中的异步块可以通过使用动态导入(例如import('./ModuleA.js');)创建,现在如果动态块无法加载,那么我想重试从其他位置加载它们。在思考了很多问题并探索了 babel 和 webpack 之后,我编写了一个 babel 插件,将 catch 子句附加到每个动态导入和内部 catches 子句中,我尝试从其他位置加载块(例如,如果第一个块加载失败来自 CDN,然后我会尝试在 catch 子句中从服务器加载它)。

要从服务器加载块,我更改__webpack_public_path__为服务器域,然后调用 __webpack_chunk_load__(chunkId);

,chunkId 在动态导入拒绝时在错误对象中可用。

现在,如果我正在使用动态导入路由,则会出现问题

React.lazy(() => import(/* webpackChunkName: "ModuleA" */ './ModuleA'));

React.lazy()预计要返回阵营组件的默认出口__webpack_chunk_load__(chunkId),负载块通过动态注入脚本标签,但它不会加载模块,并返回module.exports其被需要React.lazy()

在内部,

React.lazy(() => import(/* webpackChunkName: "ModuleA" */ './ModuleA'));

将被 webpack 转换为以下代码,

react__WEBPACK_IMPORTED_MODULE_5___default.a.lazy(function () { return Promise.resolve(__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./ModuleA */ "./src/ModuleA.js"))) });

现在,如您所见__webpack_require__.bind(null, /*! ./ModuleA */ "./src/ModuleA.js"),返回 module.exports。

我能够实现,使用 加载 webpack 异步块__webpack_chunk_load__(chunkId);,但不能调用 __webpack_require__.bind(null, /*! ./ModuleA …

javascript lazy-loading reactjs webpack

1
推荐指数
1
解决办法
2899
查看次数

标签 统计

javascript ×1

lazy-loading ×1

reactjs ×1

webpack ×1