Using Webpack With React

- 1 answer

I suppose this question is about JS bundlers all together and how they interact with React.

When I run Webpack, it grabs all of the libraries, all of the components and merges them into one javascript file (bundle.js).

My question is this. Isn't that a bad thing? All of my components are being loaded even though I won't be using a lot of them for each page.

Let's say I have Register.js that contains the registration form component. Wouldn't this approach to bundling all of this code together make that component load on every single page?

Is that how this works? If so, can I restructure this system with Webpack to not load all of the components on each view?



Webpack offers code splitting and multiple entry points for page-specific loading of modules.

There's a lot of documentation to sift through but the key takeaway is:

The more notable feature is that Code Splitting can be used to split code into an on demand loaded chunk. This can keep the initial download small and downloads code on demand when requested by the application.