2

I have an ES6 React app that is being bundled with webpack and using babel. I am configuring babel-preset-env, for node everything is working perfect, but for browser the size of my build is not changing regardless the target percentage. The size is the same when the interval is >1 or when its 90%.

The webpack version is 1.13.1, my babel version 6.26.0 and babel-preset-env version is 1.6.1

I have this in my .babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react",
    [
      "env",
      {
        "targets": {
          "node": "9.4.0",
          "browsers": [
            ">1%"
          ]
        }
      }
    ]
  ],
  "plugins": [
    [
      "transform-class-properties",
      "transform-runtime",
      "transform-decorators-legacy",
      "react-intl",
      {
        "messagesDir": "./build/messages",
        "enforceDescriptions": false
      }
    ]
  ]
}
Dani
  • 141
  • 1
  • 5

2 Answers2

0

When you use babel-preset-env it will decide, based on the list of browsers your target, to include only the necessary babel transforms.

It is an alternative to es2015 and stage-0, and including those presets along with env is counterproductive, as the transforms included in those presets will be applied whether they're needed or not.

It also depends on how you use babel-polyfill. Set it as import 'babel-polyfill' at the beginning of your JavaScript entry file, and babel-preset-env will replace the import with individual imports with only the polyfills needed for the browsers you target.

I am not sure if it works that way if you include babel-polyfill as part of the Webpack entry option, e.g.:

js entry: { myentry: ['babel-polyfill', 'js/index.js'] }

Hope this will help you get that bundle size down!

P.S. I'm aware the babel-preset-env documentation is not the clearest when it comes to describing what you need to do.

Dan
  • 9,912
  • 18
  • 49
  • 70
0

Make sure you have import "@babel/polyfill"; in your index.js.

Also, make sure you only import it once. If you have something like this

entry: ["@babel/polyfill", path.join(__dirname, "./src/index.js")],

in your webpack config, move the polyfill, so it should look like

entry: path.join(__dirname, "./src/index.js")

Maya Davis
  • 407
  • 4
  • 10