webpack-bundle-analyzer
webpack-bundle-analyzer copied to clipboard
Add ability to filter to only initial JS by entrypoint
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
The committers listed above are authorized under a signed CLA.
- :white_check_mark: login: pas-trop-de-zele / name: Sam Le (a63259394126fe33721b7361fd674e759e425225, 618a359fe0657e364df63e3527fd3d917eb968c8, 68e472178d9655ded2232e859adc804108aef849)
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.
@valscion Changed test format like you request
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
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.
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!
I was also able to test this locally and this appears to be working as intended ☺️
The committers listed above are authorized under a signed CLA.
- :white_check_mark: login: pas-trop-de-zele / name: Sam Le (a63259394126fe33721b7361fd674e759e425225, 618a359fe0657e364df63e3527fd3d917eb968c8, 68e472178d9655ded2232e859adc804108aef849, 83742b03301869dba24db5c7c5187de4c7e006be, 7a5e10f0ec35cb86ef8add00ad3e5075f642c28f, 5b080fa60da8c97df35a667c2c915f7c118d0e72)
- :white_check_mark: login: pgoldberg / name: Peter Goldberg (c70502a736f7b92a038116cfa463870dbd91d236, 89634bce126357474a12f5865608cc014a6c274a, de96330612908e53fd5fc102f94bc8e56a1ceefa, 3732efce09235f21f312a2d2b85e2e562228d884)
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 🙂
This is now released in v4.7.0, thank you for your contributions! :rocket: