{"id":1737,"date":"2022-03-14T10:00:27","date_gmt":"2022-03-14T09:00:27","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1737"},"modified":"2022-03-26T17:20:20","modified_gmt":"2022-03-26T16:20:20","slug":"browserslistsrc-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/03\/14\/browserslistsrc-in-angular\/","title":{"rendered":"Browserslistsrc in Angular"},"content":{"rendered":"\n<p>Browserslist is a tool that allows specifying&nbsp;<strong>which browsers<\/strong>&nbsp;should be supported in our frontend app by specifying &#8220;queries&#8221; in a config file. It&#8217;s used by frameworks\/libraries such as React, Angular and Vue, but it&#8217;s not limited to them.<\/p>\n\n\n\n<h4>Why would we want it?<\/h4>\n\n\n\n<p>During development we want to use the&nbsp;<strong>latest javascript features<\/strong>&nbsp;(e.g ES6) as it makes our jobs easier, leads to cleaner code, possibly better performance.<\/p>\n\n\n\n<p>As javascript evolves, browsers won&#8217;t support new features at the same pace, for instance not all browsers have built-in support for ES6 (aka ES2015). By using browserslist, transpilers\/bundlers know what browsers you want to support, so they can &#8220;group&#8221; browsers in different categories and generate separate bundles, for example:<\/p>\n\n\n\n<ul><li>Legacy Bundle: Contains polyfills, larger bundle size, compatible with old browsers without ES6 support.<\/li><li>Modern Bundle: Smaller bundle size, optimized for modern browsers.<\/li><\/ul>\n\n\n\n<p><em><span class=\"has-inline-color has-vivid-cyan-blue-color\">So our entrypoint (e.g index.html) is generated in a way that it&#8217;ll load the required bundles according to current browser being used by a user<\/span><\/em>.<\/p>\n\n\n\n<p>This process is done by Angular, Vue and React. In the future, bundler tools may generate even more bundles depending on how different browsers are, one bundle per group of browsers. Generating more bundles optimizes your app even more, at the price of making the build slower (and more complex), it&#8217;s a tradeoff.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Let&#8217;s see each individual query in an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"browserslist\": &#91;\n\"&gt;0.2%\",\n\"not dead\",\n\"not ie &lt;= 11\",\n\"not op_mini all\"\n]<\/code><\/pre>\n\n\n\n<ul><li><strong>0.2%:<\/strong>&nbsp;All browsers that have at least 0,2% of global market share<\/li><li><strong>not dead:<\/strong>&nbsp;Exclude browsers without official support in the last 24 months<\/li><li><strong>not ie &lt;= 11:<\/strong>&nbsp;Exclude IE 11 and older versions<\/li><li><strong>not op_mini all:<\/strong>&nbsp;Exclude Opera Mini<\/li><\/ul>\n\n\n\n<h4>How to use it ? <\/h4>\n\n\n\n<p>All tools will find target browsers automatically, when&nbsp;you&nbsp;add&nbsp;the&nbsp;following to&nbsp;<code>package.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"browserslist\": &#91;\n    \"defaults\",\n    \"not IE 11\",\n    \"maintained node versions\"\n  ]<\/code><\/pre>\n\n\n\n<p>Or in&nbsp;<code><strong>.browserslistrc<\/strong><\/code>&nbsp;config (<em>in the root our application. The same place as the package.json<\/em>) :<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code># Browsers that we support\n# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers\n# For additional information regarding the format and rule options, please see:\n# https:\/\/github.com\/browserslist\/browserslist#queries\n#\n# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed\n\n&gt; 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\nnot IE 9-11<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Browserslist is a tool that allows specifying&nbsp;which browsers&nbsp;should be supported in our frontend app by specifying &#8220;queries&#8221; in a config file. It&#8217;s used by frameworks\/libraries such as React, Angular and Vue, but it&#8217;s not limited to them. Why would we want it? During development we want to use the&nbsp;latest javascript features&nbsp;(e.g ES6) as it makes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,37],"tags":[505,503,506,374,504],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1737"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1737"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1737\/revisions"}],"predecessor-version":[{"id":1767,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1737\/revisions\/1767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1738"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}