[Feature] Highlight the module which is imported/used duplicately.

Hey Guys, I wanna discuss a new feature about module imported/used duplicately.

Actually, I have been working on project optimization for days. I wanna decrease webpack bundle size, make it fast to load.

So I have looked into the diagram from webpack-bundle-analyzer for hundred times in those days. This is a great plugin, many thanks to team.

Scenario

In modern web framework like Angular, React, Vue, they all support dynamic routing. And if we use static import to import same module in some dynamical routers, we may make the bundles “dirty”.

As you see below, common.ts is imported twice.

static import & dynamic import.

What I want

For web developer beginners, they have no idea about what kind of bundles they will get in different way of coding. We have many web developers in company, so I wanna to know: Is there a same problem in my project?

We could imagine if webpack-bundle-analyzer can represent it (highlight them in red or sth.) to us, that would be great!

Not all duplicate modules need to be extracted as individual. Maybe we can bundle it into main module (app.js), it depends on business and module size etc.

Questions need to discuss

1. main module (app.js) may take the most area of diagram. It is hard to find duplicate modules. After hiding main module, it better. Do we need to make a new diagram or component for this?
2. How to represent if we have many different duplicate modules. Use different colors ? Maybe a list or table is better ?

Any thoughts or suggestion are welcome. Thanks

[th0r]

I’ll reopen this issue as a reminder.

[th0r]

Well, I had thoughts about it. Maybe we’ll come back to it a little later after implementing a few other important features e.g. import reasons.

P.S. This duplication logic can be tuned with optimization.splitChunks webpack config option: https://webpack.js.org/plugins/split-chunks-plugin/

An important quotes from there:

webpack will automatically split chunks based on these conditions:

- New chunk can be shared OR modules are from the node_modules folder
- New chunk would be bigger than 30kb (before min+gz)
- Maximum number of parallel requests when loading chunks on demand would be lower or equal to 5
- Maximum number of parallel requests at initial page load would be lower or equal to 3

When trying to fulfill the last two conditions, bigger chunks are preferred.

The default configuration was chosen to fit web performance best practices,
but the optimal strategy for your project might differ.
If you're changing the configuration, you should measure the impact of your changes
to ensure there's a real benefit.

So, as @valscion said, module duplication it not necessary a problem at all.