search

webpack-contrib / webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
MIT License
12.56k stars 483 forks source link

Add ability to filter to only initial JS by entrypoint #519

Closed pas-trop-de-zele closed 1 year ago

pas-trop-de-zele commented 2 years ago

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

Demo

linux-foundation-easycla[bot] commented 2 years ago

CLA Signed

The committers listed above are authorized under a signed CLA.

valscion commented 2 years ago

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:

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/83742b03301869dba24db5c7c5187de4c7e006be/test/analyzer.js#L187-L192

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 commented 2 years ago

@valscion Changed test format like you request

valscion commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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

linux-foundation-easycla[bot] commented 1 year ago

CLA Signed

The committers listed above are authorized under a signed CLA.

pgoldberg commented 1 year ago

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 commented 1 year ago

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