Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack bundle analyzer "+ n Modules"

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.

webpack-bundle-analyzer output

like image 937
Omtechguy Avatar asked Feb 18 '18 12:02

Omtechguy


People also ask

What is the Webpack-bundle-analyzer NPM module?

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.

How to run a bundle analyzer in Webpack?

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.

How to use the Webpack-bundle-analyzer plugin in angular?

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:

Why is my Webpack-bundle-analyzer failing?

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:


2 Answers

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: enter image description here

Here is what it looks like without the box checked: enter image description here

Here is what it looks like WITH the box checked: enter image description here

like image 58
frosty Avatar answered Sep 19 '22 14:09

frosty


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.

like image 27
olore Avatar answered Sep 18 '22 14:09

olore