[feature]: Improve caching for js bundles/chunks

[Jordaneisenburger]

Is your feature request related to a problem? Please describe. For a PWA Studio developer using the scaffolder to kickstart their project we'd expect them to build custom code ontop of the scaffolded app meaning that the functionalities that change a lot will be their own local code instead of node_modules.

What happens right now is that we on buildtime we create a client.js bundle that holds local code but also @magento packages. Tese packages would add an extra x kb to the client.js bundle that needs to download everytime when some local code changes even when the @magento packages did not change.

Ideally we split @magento packages into it's own bundle so that the browser can have it in cache for longer periods of time and it doesnt have to redownload between local changes and will for example only change whenever the store is being upgraded to a newer version of PWA Studio meaning we have longer cache validity.

Describe the solution you'd like Split @magento packages into their own bundle via webpack cacheGroups.

Additional context Before change to webpack:

After change to webpack:

Benefits:

• The user doesnt have to re-download all the magento code that didnt change when revisiting.
• All the lazy loaded components are still in their own chunk but the core components we need are now packed into their own bundle
• Reduce client.js by 40ish kb

Definetly not a subject expert so would love to hear anyones feedback/opinions!

Please let us know what packages this feature is in regards to:

• [ ] venia-concept
• [ ] venia-ui
• [X] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[m2-assistant[bot]]

Hi @Jordaneisenburger. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[Jordaneisenburger]

@magento I am working on this

[supernova-at]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2414 is successfully created for this GitHub issue.

[0m3r]

hello @Jordaneisenburger could you send your diff for this feature I want to move the code of my custom vendor into a standalone bundle/chunk

[0m3r]

hello @Jordaneisenburger could you send your diff for this feature I want to move the code of my custom vendor into a standalone bundle/chunk

Something like below @vvendor/kernel/lib/intercept.js

       const builtins = targets.of('@magento/pwa-buildpack');
       builtins.webpackCompiler.tap(compiler => {
           const cacheGroups = compiler?.options?.optimization?.splitChunks?.cacheGroups;
           if (cacheGroups && typeof cacheGroups.vvendor === 'undefined') {
               cacheGroups.vvendor = {
                  test: /[\/]node_modules[\/](@vvendor)[\/]/,
                  reuseExistingChunk: true,
                  name: 'vvendor',
              };
           }
       }); 

[huykon]

@0m3r Are your way help to reduce the vendor bundle size?

[0m3r]

@huykon yes it worked for me in June, but I didn't test it in the latest version(s)

[huykon]

@0m3r I tried your way but it doesn't reduce much size, do you have any others way?