Published on

Polyfills and caniuse (part I)

Polyfills and/or shims contribute to an ever-growing bundle-size which can contribute to a poor performance and affect negatively the user experience, therefore we should strive to have a lean and small as possible bundle.

Caniuse provides up-to-date browser support data for the web, when combined with analytics data it allows us to see what percentage of users of our app support a given feature, this information can be useful when defining what features to polyfill, use or discard.

In order to get insights into our user base, we can associate or upload the analytics data into with caniuse, we can do this by accessing the settings, and the use the importer to import data from Google Analytics.

Import Prompt

To access the analytics data, we should authenticate to the account and grant permissions as seen below

Google Sign In

The service will take sometime downloading the data and once it's done we should see the browser breakdown as seen below:

Browser report

Now that the data is imported we can do proceed and make the queries, and the website support should be on the top right(All Website Data), furthermore we can switch between mobile and desktop and the browser support data should update accordingly.

ES6 Browser Data

By combining caniuse and analytics, we can take informed decisions on what features we'll polyfill, use or discard.