I am using a Webpack in node.js to compile/bundle the Javascript for a static website. It's a fairly typical setup of multiple smaller JS files that compile into a single "main.js" file used across my site.

Say my Javascript pre-bundle looked like this:

module-a.js (50 kb)
module-b.js (50 kb)
module-c.js (50 kb)

And my site consists of 5 pages;

• Page 1 utilizes code from module-a only.
• Page 2 utilizes code from module-a and module-b.
• Page 3 utilizes code from module-c only.
• Page 4 utilizes code from all three modules, module-a, module-b, and module-c.
• Page 5 utilizes nothing from the bundle.

My understanding is, based on the way Webpack compiles the main.js file, only resources needed from main.js on a page-by-page basis will be utilized and have any sort of performance impact. So on Page 5, main.js would be weightless or close to it (except for the HTTP request for main.js), Page 4 would experience the "full" weight of the package, and the other pages would load in pieces as needed.

Am I correctly understanding this? If so...

• Does that mean there's very little (if any) benefits to having multiple specific bundles specialized to the pages themselves (i.e. a "main-a.js" for page 1, a "main-ab.js" for page 2, etc.)
• Does the total size of my "main.js" file not really matter in terms of performance? So a main.js file that's 100 kb or 500 kb won't matter to a page utilizing the same functions in either? Compared to, say, a CSS file, where there could be performance concerns if a single CSS file were to get massively bloated over time.
• Are there downsides to bundling all your JS in a single file like this? The only thing I can think of is having to build a new bundle for a change to any single module in terms of maintaining the package.

Thank you!