using esm produce a slight increase in bundle size compared to fesm, especially @angular/core packages:

• ESM5: ~200kb
• FESM5: ~110kb

@aitboudad can you give me more details about how you tested that so I can take a look?

There were some bugs with Build Optimizer and ESM bundles fixed in #13474 that are important for bundle size. I'm mostly testing with @angular-devkit/build-angular@next.

@filipesilva just test any app which use a lazyload route, you may check this one https://github.com/aitboudad/cli-esm-build for example.

@aitboudad thank you, I can see it in that repro.

A normal ng build --prod creates these chunks:

chunk {0} runtime.08694c8c8efc22fa3f92.js, runtime.08694c8c8efc22fa3f92.js.map (runtime) 2.2 kB [entry] [rendered]
chunk {1} es2015-polyfills.d86fbce486db1797d2d9.js, es2015-polyfills.d86fbce486db1797d2d9.js.map (es2015-polyfills) 56.5 kB [initial] [rendered]
chunk {2} main.c117f4629509fae856f2.js, main.c117f4629509fae856f2.js.map (main) 252 kB [initial] [rendered]
chunk {3} polyfills.a1aacee915b46004ac1e.js, polyfills.a1aacee915b46004ac1e.js.map (polyfills) 41.1 kB [initial] [rendered]
chunk {4} styles.98be528fdcadb9fc4078.css, styles.98be528fdcadb9fc4078.css.map (styles) 59 bytes [initial] [rendered]
chunk {5} 5.8ef3afd4d758788a0ce7.js, 5.8ef3afd4d758788a0ce7.js.map () 904 bytes  [rendered]

If I go into node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js and add esm5 to the top of the mainFields list, I get these chunks instead:

chunk {0} runtime.94c70a2719145181bc80.js, runtime.94c70a2719145181bc80.js.map (runtime) 2.2 kB [entry] [rendered]
chunk {1} es2015-polyfills.d86fbce486db1797d2d9.js, es2015-polyfills.d86fbce486db1797d2d9.js.map (es2015-polyfills) 56.5 kB [initial] [rendered]
chunk {2} main.e3d028f39954f2091c3b.js, main.e3d028f39954f2091c3b.js.map (main) 357 kB [initial] [rendered]
chunk {3} polyfills.a1aacee915b46004ac1e.js, polyfills.a1aacee915b46004ac1e.js.map (polyfills) 41.1 kB [initial] [rendered]
chunk {4} styles.98be528fdcadb9fc4078.css, styles.98be528fdcadb9fc4078.css.map (styles) 59 bytes [initial] [rendered]
chunk {5} 5.acb78234e382d3d3a3e9.js, 5.acb78234e382d3d3a3e9.js.map () 1.02 kB  [rendered]

The main bundle goes from 252kb to 357kb.

If I remove the lazy route in src/app/app-routing.ts, the main bundle remains unchanged at 240kb.

each approach has some side effects, the real fix I think should be landed either in Webpack or Terser.

I looked at this a bit today and took a bunch of samples at https://github.com/filipesilva/cli-esm-build.

I think what's happening is that FESM "forces" the single big module to stay together even while other modules are concatenated by webpack (via https://webpack.js.org/plugins/module-concatenation-plugin/). The bigger module makes it easier for Terser to optimize.

The lazy route forces a number of modules to out of concatenated modules. Without FESM, there are many smaller modules that aren't guaranteed to stick together, so Terser can do less. I need to look further into this.

Relates to #10754

We've been working on this general problem and we don't think we can switch over to ESM while module concatenation in webpack has so many bailout scenarios, especially around lazy chunks. I'll close this PR for now.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}