SplitChunks

[chrisbrooks]

Hi, Did you ever actually get splitChunks working with AMD targetLibrary? I'm having the same problem. It works with a single chunk but not when you split out the vendor chunks. Thanks

[Beej126]

haven't come to that just yet but it seems like we might be planning that solve into an upcoming sprint so i'll try to remember to report back on how that turns out

[samuelcastro]

Any update on this topic?

[jackfox10]

I'm having this problem as well. Would be interested to hear if anyone has been able to get it working.

[Beej126]

sorry we're still getting by on having the full bundle.js... not seeing any downsides... are you running into any downsides you can report or does it just feel icky.

i have a sense that it'd be a matter of WebPack Public Path setting via rescripts... notice those docs reference "child chunks"

thread 102 in single-spa has some breadcrumbs for us, especially this post... reading that again and knowing what i know now a few months later this is worth trying next time i catch my breath... i will report back anything i see... please do the same

[jackfox10]

Hi all. I'm just posting back to let you know that code splitting is possible and works without ejecting.

My application is essentially a lightweight parent application that renders a navigation bar and has a couple of child applications. I didn't really see any downside in using the full bundle but my child applications are using suspense to lazy load a bunch of components and I didn't want to give that up.

It took me a while and a bit of trial and error but as @Beej126 suspected, the trick is to set the __webpack_public_path__ used by the child component. This can be done in the rootComponent.

I read a few comments on different pages saying that you need to remove the html plugin if using CRA but I didn't have to do this.

[Beej126]

Awesome @jackfox10 thanks for sharing!

Any chance you could PR to this repo with the exact bits so everyone has nice clarity from your efforts? I imagine some tweaks to rescripts and the root wrapper?

Short of that, could you paste here in comments the piece of rootComponent you mentioned being a clincher.

I have to say it's been pretty cool to keep rolling from CRA 2.1 to 3.3 currently on our growing production product w/o ejecting, thanks to rescripts.

On Thu, Dec 19, 2019, 6:28 AM jackfox10 notifications@github.com wrote:

Hi all. I'm just posting back to let you know that code splitting is possible and works without ejecting.

My application is essentially a lightweight parent application that renders a navigation bar and has a couple of child applications. I didn't really see any downside in using the full bundle but my child applications are using suspense to lazy load a bunch of components and I didn't want to give that up.

It took me a while and a bit of trial and error but as @Beej126 https://github.com/Beej126 suspected, the trick is to set the webpack webpack_public_path https://webpack.js.org/guides/public-path/ used by the child component. This can be done in the rootComponent.

I read a few comments on different pages saying that you need to remove the html plugin if using CRA but I didn't have to do this.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Beej126/single-spa-systemjs-cra2.1-ts-no-eject/issues/3?email_source=notifications&email_token=ABQCMLBUCMLFMJ7MHUICSA3QZOAKNA5CNFSM4ITOIZ72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHJYVOA#issuecomment-567511736, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABQCMLHNXHIR3FUHMXYVVL3QZOAKNANCNFSM4ITOIZ7Q .

[Beej126]

Going by @jackfox10's lead, googling "singleSpaReact __webpack_publicpath__", and wouldn't you know, 2nd hit was handy concrete code sample... see how they hooked setting \_webpack_publicpath_\ inside of "bootstrap", which sounds like same general area as @jackfox10 describes

https://programmer.help/blogs/micro-front-end-menu-project-1-react.html

Also, this post on wepback.config build time publicPath vs runtime __webpack_publicpath_\ was clarifying... I like the sound of buildtime and will commit anything I get working

https://github.com/facebook/create-react-app/issues/6024#issuecomment-446830606

[Beej126]

Yes, going back to post 102, webpack.config should be a trivial change, will hopefully get time to try tomorrow

https://github.com/CanopyTax/single-spa/issues/102#issuecomment-314202867

[jackfox10]

Yes it should be trivial. If you don't have time tomorrow, I will submit a PR next week with a lazy example next week.

I think here was something that had to be tweaked to load the assets also (by assets I mean fonts, images, media etc) for the child application but this was trivial also.

[Beej126]

thanks @jackfox10, i got back into this a little... i forgot what i had previously run into along the way... i think there is something else besides the public path needed to make the initial bundle.js a usable module... the webpack settings in .rescriptsrc.js are the chunk related configs i got working thru blunt trial & error... when i remove any of these and wind up with either a main.{hash}.js or otherwise bundle.js, they don't wind up being something systemjs can load anymore even though they look like AMD from the initial define signature, i.e. the module object returned from systemjs.import winds up being empty... i'd love to see your PR for clarity on a known working scenario if you're doing the same general systemjs remote url bundle retrieval as this repo.

[Beej126]

Yes it should be trivial. If you don't have time tomorrow, I will submit a PR next week with a lazy example next week.

@jackfox10, just a friendly nudge if you could find a moment to paste your working example anywhere

[jackfox10]

Sorry, I've been swamped recently. Will get this up on Friday or Saturday.

[Beej126]

Thanks @jackfox10, i will appreciate whenever you can scratch out a moment, definitely know how it goes =)

besides the public_path piece, I'm missing something crucial with the chunked module format... after putting webpack back to default chunk gen, systemjs can no longer load the first chunk ... I was expecting that first chunk load to be the same as a single bundle and then that first chunk would initiate other chunks via public_path?

[KeshavGeek]

Hi Everyone,

I hope you guys are doing good. Is there any update on this issue?

[Beej126]

On my project we've moved away from the micro-spa idea with a re-visioning of the project's complexities that hindered development velocity. I'd say we were looking at micro-spas for three primary benefits: 1) segmenting for download optimization, 2) deployment isolation and 3) multiple web framework cohabitation... Along with "embracing the monolith" =) we're expecting the built-in React code splitting with lazy & suspense to provide a more manageable equivalent of #1... #2 really turned out to be more of a burden than payoff given the single focused nature of our deliverable... i can see how larger projects would need this more than we do... on #3, we mostly had Blazor on the mind and that could still be something that brings us back to this space eventually but for now our codebase is homogeneous react typescript... i haven't tried the very latest .net 5 rc blazor bits yet but just prior to that it was re-rendering way too slow for our needs... a traditional internal LoB application requiring high information density (e.g. lots of input fields and grids) versus fluffy public facing stuff. Best of luck to all who carry on in this direction.