I would like to learn how my angular code is bundled and to which chunk files. Therefore I'm using "Webpack bundle analyzer". For some modules it's written in the report as: router.js + "12 Modules"
.
How can I determine the contents of the 12 Modules
? I clicked on the line and it didn't help.
The webpack-bundle-analyzer npm module generates an interactive treemap (not to be confused with Java's TreeMap class) of a given Webpack bundle. This map is useful for finding what are the npm packages that are adding the most to your bundle size, so you can see where to focus when trying to trim your bundle size.
To run the bundle analyzer, first you need to run Webpack with the --profile and --json flags to export the raw data that the bundle analyzer needs: $ head stats.json { "errors": [], "warnings": [ "configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Let’s install the webpack-bundle-analyzer plugin: The Angular CLI gives us the ability to build with a stats.json out of the box. This allows us to pass this to our bundle analyzer and start the process. We can add a new script to package.json to add this functionality: Now we can run the following command:
It happens when webpack-bundle-analyzer analyzes files that don't actually exist in your file system, for example when you work with webpack-dev-server that keeps all the files in RAM. If you use webpack-bundle-analyzer as a plugin you won't get any errors, however if you run it via CLI you get the error message in terminal:
In the webpack bundle analyzer UI, there is a checkbox where you can show the contents of concatenated modules. If you check that box, you will see the contents.
Here is what the UI looks like, where you can toggle the setting:
Here is what it looks like without the box checked:
Here is what it looks like WITH the box checked:
Sounds like you are using the ModuleConcatenationPlugin, try commenting it out. It's one of the plugins that can obscure this. Here are more details and the defect logged.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With