How come my Angular application's polyfills.js is 36kb in size even though I have specified `last 1 Chrome version` in my browserslist?

My journey creating a sample Angular app involved several steps:

  1. npm i -g @angular/cli (Installed Angular 11.2)
  2. ng new foo
  3. Opted in for SASS, Angular Router, and analytics
  4. cd foo
  5. Updated .browserslistrc with last 1 Chrome version. (Verification with npx browserslist showed only chrome 89, as expected.)
  6. ng build --prod

The outcome of these actions is displayed below:

$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.feaf6a85348d901578d8.js      | main          | 211.52 kB
polyfills.00096ed7d93ed26ee6df.js | polyfills     |  35.98 kB
runtime.7b63b9fd40098a2e8207.js   | runtime       |   1.45 kB
styles.09e2c710755c8867a460.css   | styles        |   0 bytes

                                  | Initial Total | 248.95 kB

Build at: 2021-03-16T14:41:16.954Z - Hash: 57aec26226ae3eb0ee1b - Time: 12529ms

I find it puzzling that 36kb of polyfills were compiled when I am only targeting the latest Chrome version. In my opinion, this should necessitate minimal or no polyfills at all.

What function do these 36kb serve? It's challenging to decipher due to the minified nature of the file.

javascriptangulartypescriptpolyfills

Answer №1

By deleting the file .browserlistrc or commenting out its contents, the resulting bundle size remains at: 35.98 kB.

Simply removing that one line causes the browserlist to default to the values specified in the defaults section, which includes: 

> 0.5%, last 2 versions, Firefox ESR, not dead

It's important to note that these default settings play a significant role in supporting Zone.js, as evident when you run ng build without the --prod flag and examine the polyfills file with comments based on the configuration set in .browserlistrc: last 1 Chrome version)

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main^M
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

For additional information, visit https://angular.io/guide/browser-support

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Kurento's WebRTC feature is currently experiencing difficulties with recording functionality

Currently, I am attempting to capture video using the Kurento Media Server with nodejs. Following the hello-world example provided here, I connected a recorderEndpoint to the webrtcEndpoint and successfully got everything up and running. However, on the se ...

javascriptnode.jswebrtckurento

How can Material UI Textfield be configured to only accept a certain time format (hh:mm:ss)?

Looking for a way to customize my material ui textfield to allow input in the format of hh:mm:ss. I want to be able to adjust the numbers for hours, minutes, and seconds while keeping the colons automatic. Any suggestions would be welcomed. ...

reactjstypescriptmaterial-ui

Show the total of a JavaScript calculation in a designated input box

Is there a way to show the total sum of this calculation in an input field? function calculateSum1() { var sum = 0; //loop through each textbox and add their values $("input.miles").each(function() { //only add if the value is a number ...

javascriptjquery

Is the statement true in JavaScript if either true or true or false?

I have implemented this code snippet to prevent my page from being iframed: window.onload = function(){ try { if (window.parent && window.parent.location.hostname !== "app.herokuapp.com"){ throw new Error(); } catch (e){ //do something ...

javascriptif-statementbooleanconditional-statements

Retrieve a collection from the server with Backbone

I am encountering an issue while trying to retrieve a collection from my server. The version I am using is 0.3.3 (not the master from github). Unfortunately, I keep running into this exception: Uncaught TypeError: Cannot use 'in' operator to sea ...

javascriptjqueryrestbackbone.js

Server Sent Events not being received by client from Express.js server

My Next.js (React) client is set up to receive Server-Sent Events from my Node.js/Express.js server, but it seems like it's not receiving any messages for some unknown reason. While the open and error events of EventSource are functioning correctly, ...

javascriptnode.jsreactjsexpressserver-sent-events

Eliminate repeated elements from an array using Typescript

I am a novice when it comes to TypeScript, and I have been encountering challenges applying my JavaScript skills. Specifically, could someone assist me in converting the JavaScript code provided below into TypeScript? If direct conversion is not feasible, ...

javascripttypescriptecmascript-6

Troubleshooting Issue: Data not appearing on Angular frontend when fetching from Laravel API

Utilizing Laravel for the back end and Angular for the front end development. The code segments related to Angular can be found in employee.component.ts file: import { Component, OnInit } from '@angular/core'; import { DataService } from 'sr ...

phpmysqlangularlaravel

prevent communication between different domains

Is there a way to prevent other domains from sending POST and GET requests to my domain? I don't trust end users to refrain from doing so, especially considering that the same origin policy can be bypassed. Are there any effective methods for managing ...

phpjavascriptajaxjsonp

Display the React component following a redirect in a Next.js application that utilizes server-side rendering

Just starting out with next.js and encountering a problem that I can't seem to solve. I have some static links that are redirecting to search.tsx under the pages folder. Current behavior: When clicking on any of the links, it waits for the API respo ...

javascriptreactjstypescriptnext.jsserver-side-rendering

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

Tips for sending refs to components that load lazily

Hey everyone, I'm currently working on passing refs to a lazy load component but running into an issue where I'm receiving null instead of {current: null}. Can someone help me identify where I might be making a mistake? 'use client'; im ...

javascriptreactjsnext.js

Creating an Angular 2 component that utilizes an interface within the constructor

If you have an interface named IData, and you want to develop an Angular 2 component that can accept any Class utilizing IData in its constructor, could this concept be implemented or is it off track? Your insights are greatly appreciated. ...

angulartypescript

Selecting Countries and States in Angular 2

Within my form, I have incorporated two dropdowns using <select> tags for country and state selection. The idea is that when a user picks a country, the state dropdown should automatically populate with the corresponding options. This functionality i ...

angulardrop-down-menunpm

Step by step guide on integrating current locations in Leaflet OpenStreetMap within an Angular application

I am currently working on an Angular application that incorporates a map using Leaflet OpenStreetMap. I want to display the real-time latitude and longitude for the map, which should update based on the location. Can someone advise me on how to add the cur ...

htmlangulartypescriptleafletangular8

Tips for ensuring that functions can pass arguments with uniform overloads

I need to create a function that passes its arguments to another function, both with the same overloads. function original (a: number): boolean; function original (a: string, b: string): boolean; function original (a: number | string, b?: string): boolean ...

typescriptoverloading

Converting Java data to JSON using a Jquery script

Does anyone know of a jQuery method that can convert a Java data object into JSON format? I am currently utilizing the HTTPResponse object to deliver my object to my ajax, but it is returning a String object. Note: JSON.parse is not an option and I am una ...

javajavascriptjqueryjson

A faulty web.config file results in an HTTP 502.5 error

While attempting to deploy an Asp.net boilerplate app on Azure, I have successfully deployed the backend and the Swagger application is functioning properly. However, when trying to deploy the Angular frontend, I encounter the error message: HTTP Error 502 ...

asp.netangularazure.net-coreazure-web-app-service

Can one function be invoked from another function in Node.js?

As I delve into learning Node.js through the process of converting an existing Rails project, I find myself grappling with callbacks and the asynchronous nature of Node. It has been a challenging journey to wrap my head around these concepts. Initially, m ...

javascriptnode.js

Is there a way for my discord bot to notify me when a certain user is playing a particular game?

How can I set up my bot to automatically send a message when a specific user starts playing a specific game, like Left 4 Dead 2? I'm looking for a way to do this without using any commands. // Game Art Sender // if (message.channel.id === '57367 ...

javascriptdiscord.js