{"componentChunkName":"component---src-templates-blog-post-js","path":"/angular-polyfill-strategies/","result":{"data":{"site":{"siteMetadata":{"title":"Fabrizio Fortunato","author":"Fabrizio Fortunato","siteUrl":"https://izifortune.com"}},"markdownRemark":{"id":"94ab258b-0ef0-5167-9077-3df34942c426","excerpt":"Cross browser compatibility is a big part of modern web development. While the majority of browsers are now aligning to the new web standards, cross browser…","html":"

Cross browser compatibility is a big part of modern web development. While the majority of browsers are now aligning to the new web standards, cross browser issues still occur for different reasons. Sometimes browsers have bugs, different level of support for a new technology. Angular supports all the most recent browsers but supporting all this variety of browsers it’s challenging especially where there are lacks of support for modern technologies. This is why the Angular team recommends to load polyfills depending on your targets. The polyfill provides a functionality expected to be natively available.

\n

An Angular application created with the angular-cli contain the file src/polyfills.ts. The file highlight the different modules that might be needed for a specific browser in order to work properly. While creating a web application, especially a public facing one, it is necessary to deal with cross browser compatibility. A user might come to your web app using an older browser or an older version of a browser and you shouldn’t force them to upgrade. Depending on the project audience it is necessary to load the polyfills needed.

\n

In this post, I want to explore different approaches to load polyfills on an Angular application. Starting from a very simple scenario where we load all the possible modules to more advanced ones. The polyfills are often a neglected part of an Angular application resulting in a performance loss for your web application and users.

\n

Bundle them all

\n

In our first case, we are just blindly uncommenting all the imports statements in our polyfills files. This is a very simple case and I imagine for a lot of developers that are starting an Angular project, this is the easiest way to get your application working with no extra effort, except for your users.

\n
import 'core-js/es6/symbol';\nimport 'core-js/es6/object';\nimport 'core-js/es6/function';\nimport 'core-js/es6/parse-int';\nimport 'core-js/es6/parse-float';\nimport 'core-js/es6/number';\nimport 'core-js/es6/math';\nimport 'core-js/es6/string';\nimport 'core-js/es6/date';\nimport 'core-js/es6/array';\nimport 'core-js/es6/regexp';\nimport 'core-js/es6/map';\nimport 'core-js/es6/weak-map';\nimport 'core-js/es6/set';\nimport 'core-js/es6/array';\nimport 'classlist.js';  // Run `npm install --save classlist.js`.\nimport 'core-js/es6/reflect';\nimport 'web-animations-js';  // Run `npm install --save web-animations-js`.\nimport 'zone.js/dist/zone';  // Included with Angular CLI.
\n

All the browsers, even the ones which don’t need polyfills, are paying the price of the older browser in your list of supported ones. So every user needs to download the generated file in its entirety. If we look at the generated polyfill bundle size, this is double the space that a common utility library such as ramda or lodash occupies without using any tree-shaking on them.

\n

\n \n ; // Included with Angular CLI.\n

—UPDATE—\nTo generate the ie-polyfills first we will need to create a webpack configuration in webpack-polyfill-config.js

\n
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nmodule.exports = {\n  mode: 'production',\n  optimization: {\n    minimizer: [new UglifyJsPlugin({\n      uglifyOptions: {\n        warnings: false,\n        parse: {},\n        compress: {},\n        mangle: true, // Note `mangle.properties` is `false` by default.\n        output: null,\n        toplevel: false,\n        nameCache: null,\n        ie8: false,\n        keep_fnames: false,\n      }\n    })]\n  }\n};
\n

—ENDUPDATE—

\n

Then just add the following command inside the script section in the package.json:

\n
\"build-ie-polyfills\": \"webpack-cli src/ie-polyfills.js -o src/generated/ie-polyfills.min.js --optimize-minimize -c webpack-polyfill.config.js\",\n\"postbuild\": \"cp -p src/generated/ie-polyfills.min.js dist/generated\"
\n

And finally, add the script tag inside the head in src/index.html:

\n
<script nomodule=\"\" src=\"generated/ie-polyfills.min.js\"></script>
\n

The nomodule attribute is a boolean attribute that prevents a script from being executed in user agents that support module scripts. Only browsers that do not support modules like IE11/10/9, will download the bigger bundle while the rest of the browsers will ignore it and just download the smaller file.

\n

\n \n );\n\nmodule.exports = {\n mode: 'production',\n optimization: {\n minimizer: [new UglifyJsPlugin({\n uglifyOptions: {\n warnings: false,\n parse: {},\n compress: {},\n mangle: true, // Note `mangle.properties` is `false` by default.\n output: null,\n toplevel: false,\n nameCache: null,\n ie8: false,\n keep_fnames: false,\n }\n })]\n }\n};\n

//polyfills.js\nimport 'core-js/es7/reflect'; // Used in JIT - remove if you use only AOT\nimport 'zone.js/dist/zone';
\n
//ie-polyfills.js\nimport 'core-js/es6/symbol';\nimport 'core-js/es6/object';\nimport 'core-js/es6/function';\nimport 'core-js/es6/parse-int';\nimport 'core-js/es6/parse-float';\nimport 'core-js/es6/number';\nimport 'core-js/es6/math';\nimport 'core-js/es6/string';\nimport 'core-js/es6/date';\nimport 'core-js/es6/array';\nimport 'core-js/es6/regexp';\nimport 'core-js/es6/map';\nimport 'core-js/es6/set';\nimport 'classlist.js';\nimport 'web-animations-js';\n\nimport 'core-js/es7/reflect'; // Used in JIT - remove if you use only AOT\nimport 'zone.js/dist/zone';
\n

And last we add the scripts in our package.json

\n
\"build-ie-polyfills\": \"webpack-cli polyfills.js ie-polyfills.js  -o ./generated/ie-polyfills.min.js --mode production --optimize-minimize -c webpack.config.js\",\n\"build-polyfills\": \"webpack-cli polyfills.js -o ./generated/polyfills.min.js --mode production --optimize-minimize -c webpack.config.js\"
\n
npm run build-ie-polyfills && npm run build-polyfills
\n

Running the two commands generate two different polyfills files inside the generated folder to be used inside our serverless function. Serverless framework needs to include the generated files in the function created. Inside serverless.yml specify:

\n
package:\n  include:\n    - generated/polyfill.min.js\n    - generated/ie-polyfill.min.js\n  exclude:\n    - ie-polyfills.js\n    - polyfills.js
\n

It is time to open handler.js and add the logic to serve a different polyfill based upon the user agent of the request. The idea is to detect the user agent and then based upon such information serve one or the other polyfill. Import a utility library which parses the user agent string with high accuracy by using hand-tuned dedicated regular expressions for browser matching.

\n
npm i --save useragent
\n
//handler.js\n'use strict';\n\nconst useragent = require('useragent');\nconst util = require('util');\nconst fs = require('fs');\nconst readFile = util.promisify(fs.readFile);\nconst path = require('path');\n\nconst getPolyFillName = (browser) => {\n  switch (browser) {\n    case 'ie':\n      return path.join(__dirname, '/generated/ie-polyfills.min.js');\n    default:\n      return path.join(__dirname, '/generated/polyfills.min.js');\n  }\n};\n\nmodule.exports.polyfill = async (event, context) => {\n  const ua = useragent.parse(event.headers['user-agent']);\n  console.log(ua);\n  const body = await readFile(getPolyFillName(ua.family.toLowerCase()), 'utf8');\n  return {\n    statusCode: 200,\n    body,\n    headers: {\n      'Content-Type': 'application/javascript',\n      'X-Detected-UA': ua.family,\n    }\n  };\n};
\n

The serverless function needs an endpoint for our browser to reach it. While working with AWS we can attach a lambda to an API Gateway and the latter will provide the integration from the function to the REST endpoint. Serverless simplify the creation of all the resources needed by simply adding events to the function inside serverless.yml

\n
  polyfill:\n    handler: handler.polyfill\n    events:\n       - http:\n           method: get\n           path: /polyfill
\n

Now we are ready to deploy our function

\n
sls deploy
\n

Serverless outputs at the end of the creation process a URL that point to your lambda.

\n

\n \n