Why are flattened ES modules (FESM) more performant than unflattened ES modules (ESM)?

Question

According to the Angular Package Format document, Angular packages are distributed as two kinds of ES modules:

• Flattened ES modules (FESM), where the import statements are removed and the imported code is inlined.
• Unflattened ES modules (ESM), where the import statements are left untouched.

The package.json's module value points to the FESM version. The reason stated in the document is:

As of webpack v4 the flattening of ES modules optimization should not be necessary for webpack users, and in fact theoretically we should be able to get better code-splitting without flattening of modules in webpack, but in practice we still see size regressions when using unflattened modules as input for webpack v4. This is why "module" and "es2015" package.json entries still point to fesm files. We are investigating this issue and expect that we'll switch the "module" and "es2015" package.json entry points to unflattened files when the size regression issue is resolved.

Why do unflattened modules see size regressions where flattened ones do not?

Fireworm

Your question involves questions about Angular internals, ES Modules, Webpack, NPM package.json configurations, then include four questions about bundlers, performance, Angular vs. vanilla JS, Webpack 4 vs. Webpack 5 - then finally blows off the entire Angular angle since that really isn't in play anyway. Your question is sort of all over the place and will likely draw lots of opinions. – Whole

@RandyCasburn Thanks for the feedback. I've edited the original question now to make it specific to the problem mentioned in the Angular Package Format document. – Fireworm