Angular构建生成es5与es2015重复chunk问题咨询

Hey there, let's break this down clearly—this isn't a bug, it's actually an intentional feature built into Angular to balance compatibility and performance.

What's Causing the "Duplicate" Chunks? #

This is all thanks to differential loading, a feature introduced in Angular 8 that's enabled by default for production builds. Here's how it works:

• Angular generates two separate sets of bundle chunks:
  • One set tagged with es2015: Optimized for modern browsers that support ES2015+ syntax (like Chrome, Firefox, Edge post-2020). These chunks use native modern JS features (arrow functions, let/const, native classes) without extra transpilation bloat.
  • Another set tagged with es5: Transpiled to ES5 syntax and includes necessary polyfills, designed for older browsers that don't support modern JS (like IE11, very old Safari versions).
• The "duplicate" label is just because they correspond to the same logical module, but compiled for different environments—they're not identical under the hood.

Does This Increase the Overall Bundle Size? #

Let's split this into two key parts:

• Total build output size on disk: Yes, the combined size of both sets is larger than if you only built for one target. But this is a deliberate tradeoff to support both modern and legacy browsers.
• Size downloaded by end users: No, users won't download both sets. Angular automatically modifies your index.html to include:
  • <script type="module"> tags for the es2015 bundles (modern browsers will load these, ignoring the other set entirely)
  • <script nomodule> tags for the es5 bundles (only older browsers that don't support JS modules will load these)
• Bonus perk: The es2015 bundles are actually smaller than their es5 counterparts, since they skip the transpilation overhead. Modern browser users get a lighter, faster-loading experience as a result.

Optional: Disable Differential Loading (If You Don't Need It) #

If you're sure you don't need to support legacy browsers, you can turn this off:

1. Open your tsconfig.json and confirm "target": "es2015" (this is the default in newer Angular versions, but double-check)
2. Or, in angular.json, under your build configuration, add "differentialLoading": false to the options object.

内容的提问来源于stack exchange，提问作者chethankumar