Debugging webpack code splitting with React.lazy

Question

I am using React.lazy to try to split off some code from my main application, but it's not working the way I expect and I'm having trouble figuring out how to debug.

My code looks something like:

// index.js

import React from 'react';
import { LibraryUtils } from './library/utils';

const Component = React.lazy(() => import('./component'));
...

// component.js

import React from 'react';
import LibraryComponent from './library/component';
...

What I want:

vendors.chunk.js: react
main.chunk.js: index.js
main-1.chunk.js: component.js
library-0.chunk.js: library/utils
library-1.chunk.js: library/component
index.html: main.chunk.js, library-0.chunk.js, vendors.chunk.js
async chunks: main-1.chunk.js, library-1.chunk.js

What I get:

vendors.chunk.js: react
main.chunk.js: index.js + component.js
library.chunk.js: library/utils + library/component
index.html: main.chunk.js, library.chunk.js, vendors.chunk.js
async chunks: none

As a result, my initial page load needs to load all JS and therefore has worse performance.

How can I force webpack to split library into multiple chunks, so that I can leverage async chunks? Even better, how do I go about debugging something like this?

My config looks something like this:

splitChunks: {
    chunks: 'all',
    cacheGroups: {
        library: {
            test: /[\\/]library[\\/]/,
        },
    },
}

mariaines · Accepted Answer · 2023-01-26 22:53:57Z

0

The problem was an accidental inclusion of babel-plugin-dynamic-import-node, which transforms dynamic imports (required for async loading) into regular require's for node environments, thereby preventing any async chunks from being generated. The solution was to remove that (or only include it when running unit tests).

answered Jan 26, 2023 at 22:53

mariaines

5071 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kenneth Truong Over a year ago

Did you ever figure out how to go about debugging code split issues?

mariaines Over a year ago

@KennethTruong no, sorry, things worked as expected once I fixed my issue of accidentally including babel-plugin-dynamic-import-node

Collectives™ on Stack Overflow

Debugging webpack code splitting with React.lazy

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related