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 …