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

[gaokun]

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

[valscion]

Thanks for opening an issue first to dicuss this idea ☺️

I'm a bit hesitant on adding analysis UI like this. Sometimes it's better for a piece of code to be duplicated in other chunks, especially if those chunks would not be rendered on the same page.

For example, our application has ~50 chunks, and some modules are duplicated in a few but it is not a concern to us as the chunks are small enough and likely aren't loaded on the same page.

If we'd add an UI that "warns" somehow about these duplicate chunks, it could lead to optimizing code that is not a problem.

---

It could be possible to have such a feature behind a UI toggle or something. I'm worried that this kind of feature is bug prone, and difficult to maintain.

[gaokun]

Thanks for your comment.

Yes, most times the chunks are small. There is a case in my project, we use a live video stream player in several pages. And it is not that small.

Maybe I bring a specific idea to a common tool. ☺️

Thanks again You can close this issue or leave it for feature, up to u.

[valscion]

I'll close this issue but others can feel free to comment here if they have more to add :relaxed:

[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.

[th0r]

I'll reopen this issue as a reminder.