How to drop support for IE, and prevent babel transpilation to ES5 in order to gain performance gain

Question

Currently I am using default webpack config of Create React App for babel transpilation. It seems that default babel-loader (in CRA config) uses "babel-preset-react-app". Now all I want is to prevent the transpilation of JS files to ES5 since I don't need to support Internet Explorer. I'm hoping this will bring some gain in the build time.

Versions being used:

• Webpack 4
• Babel Loader 8
• react-app-rewired 2.1
• customize-cra 0.9

Answer 1

You can set the browserslist configuration in your package.json to set the target browsers.

{
 ...
 "browserslist": {
     ">0.2%",
      "not dead",
      "not IE 11"
   }
}

You can also generate build as per your environment

"browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is also mentioned in the official CRA doc.

I'd suggest taking a look at browserslist to customize the rules as per your exact requirements.