I have a unique Singleton-Class FooService that is loaded through a special import-map. My goal is to efficiently await its loading and then utilize it in different asynchronous functions as shown below:
declare global {
interface Window {
System: System.Module
}
}
const module = window.System.import('@internal/foo-service')
const fooService = module.FooService
async function func1() {
await fooService.doBar()
.
.
}
async function func2() {
await fooService.doBar2()
.
.
}
However, I was only able to make it work using the following approach:
declare global {
interface Window {
System: System.Module
}
}
async function getfooService() {
const module = await window.System.import('@internal/foo-service')
return module.FooService
}
function func1() {
getfooService().then(fooService => fooService .doBar())
.
.
}
function func2() {
getfooService().then(fooService => fooService.doBar2())
.
.
}
If possible, how can I optimize this process without having to reload it every time I need to use it?