Webpack code splitting

Help Requests
1

I have an app structure that looks like this
src
–areas
----area1
----area2
----area3

Each area is essentially a page, there may be multiple child pages per area, but I’m okay with them all being bundled as one area chunk.

I used some of the updated web pack config to fix the issue where vendor modules were being duplicated in the app. I am trying to write a rule that will create a chunk per area though I fear I don’t know exactly how to do this. I tried something like this

 appSplit: { // each area as separate chunk file
          test: /[\\/]src[\\/]areas[\\/]/,
          name(module) {
            // Extract the name of the package from the path segment after node_modules
            const packageName = module.context.match(/[\\/]src[\\/]areas[\\/](.*?)([\\/]|$)/)[0];
            return `app.${packageName.replace('@', '')}`;
          },
          priority: 20,
          minSize: 1
        }

I’m currently broken on the package name, but if i just give it a string, i only end up with one package and all areas are in it, so that is either due to naming or I’m doing something completely wrong

2

You can supply a second parameter to the Platform function which will be the name of the separate bundle

3

I’m not sure I understand what you mean by the Platform function. Can you give an example?

4

This is how i do it. Look at “CHUNK_NAME”, it’s an additional property to the PLATFORM. It also works for dialogs.

{
route: ‘ROUTE_URL_NAME’,
name: ‘ROUTE_NAME’,
moduleId: PLATFORM.moduleName(‘PATH_TO_PAGE’, ‘CHUNK_NAME’),
nav: true,
title: ‘TITLE’
},

1 Like