1

I've been looking at webpack bundling strategies and found a pretty good guide here: https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

It seems to advocate that lots of individual files is (often) the best way to go. I've followed along and created a simple bundle consisting of a js file that imports flexslider:

import "flexslider"
$(window).on('load', function () {
$('.flexslider').flexslider({

 });
});

Obviously flexslider lives in the node_modules folder and my webpack config is set up to split out npm packages:

 runtimeChunk: 'single',
        splitChunks: {
            chunks: "all",
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                    },
                },
            }

Now for this fairly simple scenario here is what webpack generated

enter image description here

Ignore core and main as these are other bundles.

homeUS was the file that did the flexslider import - In terms of my HomeUS.html am I meant to reference all of these js files? or are some internal to webpack and I just reference HomeUs.js and flexslider.js and it all just 'works'?

I'm assuming some of these are flexslider dependencies As you can probably tell I'm not a webpack expert - the idea seems to be that returning visitors would only have to download the individual npm packages if they had changed and not a huge 'vendor' bundle.

Thanks

Michael Harper
  • 1,531
  • 2
  • 25
  • 42

1 Answers1

2

This way you need to reference all of them in html. If you want js files to call other files and load them only as needed look at dynamic import() syntax. Also in my opinion this kind of hardcore bundle splitting is overkill. Maybe just split them to bundle chunk and common chunks.

Никита Гулис
  • 387
  • 1
  • 3
  • 8
  • Would you generally recommend an app.js/ts (your own code) and a vendor (node_modules) bundle? I guess you could split big packages out e.g. bootstrapVendor: { test: /[\\/]node_modules[\\/](react-bootstrap)[\\/]/, name: "bootstrapVendor" }, vendor: { test: /[\\/]node_modules[\\/](!react-bootstrap)(!lodash)(!moment)(!moment-timezone)[\\/]/, name: "vendor" }, – Michael Harper May 04 '19 at 12:27
  • 1
    @MichaelHarper You could split the most used packages in one main vendor bundle and your own code into either one bundle per page and commons between them (best for multipage sites). You could also use import() and split your code into lazy loaded chunks (this is more useful for spa’s). Dynamic import() syntax is also good for packages that are not used immediately since webpack can load them only when they are needed (or when the browser is idle with help of prefetch/preload). – Никита Гулис May 04 '19 at 18:43