当我使用React和ReactRouter时,我可以延迟加载应用程序的入口文件吗?当我进入页面时,有很多对我拥有的每个应用程序的remoteEntry.js文件的请求。我不想因为性能而在开始时获取它。我想在访问特定应用程序的路由时加载它们。
remoteEntry.js
的数据
p1tboqfb1#
您需要使用基于Promise的动态远程。例如,与其将远程定义为URL,不如:
module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { app1: 'app1@http://localhost:3001/remoteEntry.js', }, }), ],};
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
app1: 'app1@http://localhost:3001/remoteEntry.js',
},
}),
],
};
字符串您可以在webpack.config.js中删除此引用,并将远程定义为将在运行时解析的promise:
webpack.config.js
const loadScope = (url: string, scope: string) => { const element: any = document.createElement('script'); const promise = new Promise((resolve, reject) => { element.src = url; element.type = 'text/javascript'; element.async = true; element.onload = () => resolve(window[scope]); element.onerror = reject; }); document.head.appendChild(element); promise.finally(() => document.head.removeChild(element)); return promise;};const loadModule = async (url: string, scope: string, module: string) => { try { const container = await loadScope(url, scope); await __webpack_init_sharing__('default'); await container.init(__webpack_share_scopes__.default); const factory = await container.get(module); return factory(); } catch (error) { console.error('Error loading module:', error); throw error; }};const MyApp = React.lazy(() => loadModule( 'http://localhost:3001/remoteEntry.js', 'app1', './MyApp', ),);
const loadScope = (url: string, scope: string) => {
const element: any = document.createElement('script');
const promise = new Promise((resolve, reject) => {
element.src = url;
element.type = 'text/javascript';
element.async = true;
element.onload = () => resolve(window[scope]);
element.onerror = reject;
});
document.head.appendChild(element);
promise.finally(() => document.head.removeChild(element));
return promise;
const loadModule = async (url: string, scope: string, module: string) => {
try {
const container = await loadScope(url, scope);
await __webpack_init_sharing__('default');
await container.init(__webpack_share_scopes__.default);
const factory = await container.get(module);
return factory();
} catch (error) {
console.error('Error loading module:', error);
throw error;
}
const MyApp = React.lazy(() =>
loadModule(
'http://localhost:3001/remoteEntry.js',
'app1',
'./MyApp',
),
);
型有关详细信息,请参阅Webpack 5文档。
oalqel3c2#
new ModuleFederationPlugin({ name: 'reactParent', filename: 'remoteEntry.js', remotes: { reactChild: 'reactChild@/reactChild/remoteEntry.js', svelteChild: 'svelteChild@/svelteChild/remoteEntry.js', vueChild: 'vueChild@/vueChild/remoteEntry.js' }})
name: 'reactParent',
filename: 'remoteEntry.js',
reactChild: 'reactChild@/reactChild/remoteEntry.js',
svelteChild: 'svelteChild@/svelteChild/remoteEntry.js',
vueChild: 'vueChild@/vueChild/remoteEntry.js'
})
字符串将remoteEntry.js文件的路径放入Webpack配置中即可完成工作。在这个例子中,我的应用程序被设置为将请求代理到微前端,因此/reactChild被代理到特定应用程序正在运行的位置。
2条答案
按热度按时间p1tboqfb1#
您需要使用基于Promise的动态远程。
例如,与其将远程定义为URL,不如:
字符串
您可以在
webpack.config.js
中删除此引用,并将远程定义为将在运行时解析的promise:型
有关详细信息,请参阅Webpack 5文档。
oalqel3c2#
字符串
将remoteEntry.js文件的路径放入Webpack配置中即可完成工作。在这个例子中,我的应用程序被设置为将请求代理到微前端,因此/reactChild被代理到特定应用程序正在运行的位置。