Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE polyfills should not bloat polyfill file for newer browsers #16336

Closed
kirbychan opened this issue Dec 2, 2019 · 2 comments
Closed

IE polyfills should not bloat polyfill file for newer browsers #16336

kirbychan opened this issue Dec 2, 2019 · 2 comments

Comments

@kirbychan
Copy link

@kirbychan kirbychan commented Dec 2, 2019

馃殌 feature request

Description

With Angular 8 the es5BrowserSupport flag provided in angular.json with Angular 7 became deprecated.
Since then old browser support is handled via browserslist.

As soon as es2015 is selected as target in the compilerOptions, angular will use differential loading and create two bundles - one for old browsers and one for newer ones.
This will also include two polyfill bundles (polyfill-es5.js and polyfill-es2015.js).

The idea is to move all polyfills needed by newer browser to the polyfill-es-2015 file and all for older browsers to the polyfill-es5 file.

It will provide all bundles in the index.html file. Browsers know which module to load by the 'nomodule' and 'type=module' attributes.

However this won't work for IE (Internet Explorer 10/11).
In order to enable IE support we need to add the essential polyfills in the polyfill.ts file and enable IE support in the browserslist configuration.

The issue here is, that after doing so, the polyfill-es2015 file will now be bloated with the polyfills imported only for IE.

A simple reproduction can be achieved by creating a fresh project with the angular-cli and turn IE support on and off and look at the created polyfill files.

The results would be similar to this:
no IE support:
polyfill-ie5 - 638kB
polyfill-ie2015 - 141kB

with IE support:
polyfill-ie5 - 698kB
polyfill-ie2015 - 532kB

This values will of course shrink when minified but the polyfil-es-2015 file will still be significantly larger with IE11 support active than without.

Describe the solution you'd like

It would be nice if the IE polyfills would only be loaded by IE or at least only by older browsers and not pollute the polyfill file which is meant for newer browsers.

Maybe a Switch to determine if a polyfill is supposed to be provided for older or newer browsers (i.E an annotation if it is module or nomodule relevant).

Describe alternatives you've considered

I've considered to create an IE-only polyfill file manually and load it by the index.html. simillar to the solution mentioned in Fabrizio Fortunatos blog post: https://izifortune.com/angular-polyfill-strategies/

@gkalpak gkalpak transferred this issue from angular/angular Dec 2, 2019
@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Dec 2, 2019

Hi @kirbychan, thanks for this feature request. However, this was already brought out some time ago, and it a duplicate of #14168 at this point the same resolution applies and this feature is not currently in our roadmap.

@alan-agius4 alan-agius4 closed this Dec 2, 2019
@clydin

This comment has been minimized.

Copy link
Member

@clydin clydin commented Dec 2, 2019

Also relevant is that the essential polyfills for Angular are automatically included when using differential loading. It is not required to add any additional polyfills for Angular to allow it run on IE.

That article appears to be out of date and does not reflect the behavior of the latest versions of the CLI which include the differential loading feature set.

A newly generated 8.x project (8.3.20 currently) no longer contains any of the ES polyfills in the polyfills.ts file that were previously present (commented out or otherwise). They are instead automatically included in the appropriate script type based on the application's browser requirements specified via a browserslist configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can鈥檛 perform that action at this time.