extract common node modules among sub apps

[ArtixZ]

Thanks for creating this awesome example.
After analyzing the bundle file, I found there are a lot of redundancies among sub-apps, because they have many intersection of dependencies.

Is there a way to extract the common dependencies?

[maciej-w]

The README gives one example of sharing, please see

Multiple Angular Apps

It mentions loading Zone.js once in the portal, I believe you could do the same.

[ArtixZ]

@maciej-w
I believe this is different. Zone.js is imported here:

https://github.com/me-12/single-spa-portal-example/blob/master/portal/src/portal.js

And it's a global level variable.

But what if I want to extract some common modules( e.g. react, lodash, momentjs ) together into one bundle file. And whenever a sub-app imports react, it imports from the bundle file.

[maciej-w]

Sorry, it is different...

I found something in the Webpack documentation what might be usefull to you but it would still require one webpack.config for all those apps, which might make sense if you develop your apps separately, then push the ready code into the multiple apps container and build your apps there, then you can deploy them separately afterwards. You'd probably be able to deploy (serve) the common bundle separately...

The process would be:

• Repo 1: React1

• Repo 2: React2

• Repo3: React1 + React2 + webpack.config.js

Result: react1entry + react2entry + commonchunks

https://github.com/webpack/docs/wiki/optimization#multi-page-app

Is this what you're looking for?

[ArtixZ]

@maciej-w
This really make sense and I believe it should work. Thanks for helping.

But it still is not perfect for my scenario - I'm working on Repo 1 and can't get the source code of Repo 2. I only know we have some large common dependencies, such as React, lodash, etc.

I believe there is something to do with Systemjs, as it is the module importer:

https://github.com/me-12/single-spa-portal-example/blob/master/portal/src/helper.js

But I couldn't figure out how to import the "commonchunks" before doing SystemJS.import(appURL).

Thanks again!

[maciej-w]

Hi @ArtixZ - did you manage to work it out? I found an example which does what you are trying to achieve, the difference is that everything is served from one 'dist' folder, all apps + common chunks. Not sure to be honest how would Webpack find what are your common dependencies so maybe you'd have to specify them yourself. Have a look at this repo

[baetschjunge]

@ArtixZ I'd also be interested if you'd been able to find any solution on this problem, I'm currently trying to find something to solve this Problem in the Portal example too.

[mbanting]

I can't seem to get it to work with Webpack 4's SplitChunksPlugin either.
It nicely extracts the common modules as expected, but single-spa can't mount the app when that happens. Has anyone had any luck with this?