search

joeldenning / simple-single-spa-webpack-example

A simple example of how to use webpack with single-spa
MIT License
292 stars 94 forks source link

Support for lazy loading of dependent libraries #37

Open michaeltford opened 3 years ago

michaeltford commented 3 years ago

Is there a way to update or create another version of this example that allows for the dependencies to be lazy loaded (if not available). Ideally the react/angular framework would not be loaded at startup but rather only when that route is selected.

Based on the recommendations from the single-spa documentation (as I understand it) each application should also have it's own packaging.

joeldenning commented 3 years ago

Hi @michaeltford, this repository is several years old and I don't actively update it. Angular is rather difficult to get working without using Angular CLI, so the newer examples that I've created use Angular CLI instead of a custom webpack configuration. The majority of the code here was written by other people over the years and it does not represent what I consider to be best practice.

To lazy load the dependencies, you should use a single entry point in the webpack config, and remove the common-dependencies entry. The person who authored the webpack config didn't realize that webpack already prevents duplication of the angular and react libraries when you have a single webpack config.

michaeltford commented 3 years ago

Thanks @joeldenning for the clarifications.

I started a POC today using https://github.com/react-microfrontends and your documentation for best practices. This seems to be very close to what I need. The thing that I am working through now is how to create a 'single' entry point for all the microservices when I don't have access to the original html page. (Ideally as an es6 module and without injecting scripts).

joeldenning commented 3 years ago

Here is where webpack entry points are documented - https://webpack.js.org/configuration/entry-context/#entry. The documentation shows examples of an object with multiple entries, but it's also possible to have only one entry in the object, or to not have an object at all (just a single string). In the react microfrontends example, they use a single webpack entry because they use webpack-config-single-spa (included in create-single-spa). See the following reference which shows this:

https://github.com/single-spa/create-single-spa/blob/ced1d82c910b1a58abeff7b2ccbe739ecc13cc42/packages/webpack-config-single-spa/lib/webpack-config-single-spa.js#L26