me-12 / single-spa-portal-example

Example project on how to combine multiple SPA's on a single Website
MIT License
407 stars 136 forks source link

single SPA portal synchronously loads Store #52

Closed ArtixZ closed 6 years ago

ArtixZ commented 6 years ago
async function init() {
    const globalEventDistributor = new GlobalEventDistributor();

    // app1: The URL "/app1/..." is being redirected to "http://localhost:9001/..." this is done by the webpack proxy (webpack.config.js)
    await loadApp('app1', '/app1', '/app1/singleSpaEntry.js', '/app1/store.js', globalEventDistributor);

    // app2: The URL "/app2/..." is being redirected to "http://localhost:9002/..." this is done by the webpack proxy (webpack.config.js)
    await loadApp('app2', '/app2', '/app2/singleSpaEntry.js', '/app2/store.js', globalEventDistributor);

    // app3: The URL "/app3/..." is being redirected to "http://localhost:9003/..." this is done by the webpack proxy (webpack.config.js)
    await loadApp('app3', '/app3', '/app3/singleSpaEntry.js', null, null); // does not have a store, so we pass null

    // app3: The URL "/app4/..." is being redirected to "http://localhost:9004/..." this is done by the webpack proxy (webpack.config.js)
    await loadApp('app4', '/app4', '/app4/singleSpaEntry.js', null, null); // does not have a store, so we pass null

    // app5: The URL "/app5/..." is being redirected to "http://localhost:9005/..." this is done by the webpack proxy (webpack.config.js)
    await loadApp('app5', '/app5', '/app5/singleSpaEntry.js', '/app5/store.js', globalEventDistributor);

    singleSpa.start();
}

Is it synchronously loading the stores? Can I load these with non-blocking way?

me-12 commented 6 years ago

You are right, there is no reason to load one store after the other. We only need to make sure that the following two facts are given:

  1. Don't load any app before their own store is loaded.
  2. Don't start singleSpa before all necessary apps are loaded.

I have merged a PR that changes the init process to load all apps simultaneously. Have a look: https://github.com/me-12/single-spa-portal-example/pull/53/files

ArtixZ commented 6 years ago

Another question or optimization if you are familiar with. There are a bunch of overlapped node modules sit in portal ui and sub-apps. Is there a way to extract those common modules and load only one copy of them?