Add ability to filter to only initial JS by entrypoint

[pas-trop-de-zele]

Context

At the moment, webpack-bundle-analyzer allows filtering bundles by chunks which is very nice since that allows us to see what’s really inside our bundle and do appropriate optimization.

However, there is not really a way for us to look at the initial JS being loaded. As a result, we added a filter to enable the ability to filter down to the initial chunks by entrypoint. This change would allow us to see the JS being loaded on the page before any dynamic imports are executed, which in lots of cases is responsible for app slow loading time

Changes

Added new isInitialByEntrypoint field to chunks object in chartData. This is a nested object with key being entrypoints and value being boolean if the chunk is initial for that entry point

chartData: [
  {
    label: ‘chunkName’,
    isAsset: true,
    …,
    isInitialByEntrypoint: {
      {entrypointA: true},
      {entrypointB: true},
    }
  },
]

The reason for choosing nested object with boolean value instead of a more straightforward Set approach is that Set cannot be serialized and chartData would have to be put on the windows object. The nested object option could be serialized while keeping the search performant

Screenshot

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: pas-trop-de-zele / name: Sam Le (a632593, 618a359, 68e4721)

[valscion]

Oh nice, this looks like a really useful feature! Thank you for the PR ☺️

Do you think it's possible to also add test coverage going from a webpack stats JSON object to the end result? So that the test would look similar to e.g. what we have here:

webpack-bundle-analyzer/test/analyzer.js

Lines 187 to 192 in 83742b0

	it('should support generating JSON output for the report', async function () {
	generateJSONReportFrom('with-modules-in-chunks/stats.json');
	const chartData = require(path.resolve(__dirname, 'output/report.json'));
	expect(chartData).to.containSubset(require('./stats/with-modules-in-chunks/expected-chart-data'));
	});

It would be nice if we could test the end result rather than only the getChunkToInitialByEntrypoint function behavior itself. Ideally we would not even need to export the getChunkToInitialByEntrypoint function from src/analyzer.js but keep that function as an implementation detail. Right now only the tests need that function to be exported, and it would be nice if the tests could avoid that but still get same coverage.

[pas-trop-de-zele]

@valscion Changed test format like you request

[valscion]

Thanks! I'll take this PR for a test drive when I get a good slot some point in the future. I didn't spot any glaring issues when reading over the code quickly, so that's good. I'll review more closely when I have the time

[gluxon]

Thanks for taking a look @valscion. 🙂 I'm on @pas-trop-de-zele's team and we're glad to hear it'll be useful feature.

[pgoldberg]

Hey @valscion, just wanted to bump this to see if you'd get a chance to take a look, since this would be a really useful feature for us. I'd be happy to make any changes to the implementation if necessary. Thank you!

[valscion]

The code looks good enough to me! Are you able to add a changelog entry? And also fix the typo spotted in test code ☺️

[valscion]

I was also able to test this locally and this appears to be working as intended ☺️

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: pas-trop-de-zele / name: Sam Le (a632593, 618a359, 68e4721, 83742b0, 7a5e10f, 5b080fa)
• ✅ login: pgoldberg / name: Peter Goldberg (c70502a, 89634bc, de96330, 3732efc)

[pgoldberg]

Thanks so much for taking a look @valscion! I added a changelog and fixed the typo – let me know if there's any other changes you'd like us to make before merging 🙂

[valscion]

Looks good to me, thanks!

[valscion]

I'd classify this as a "New Feature", it's a nice addition! ☺️

[valscion]

This is now released in v4.7.0, thank you for your contributions! 🚀