Can Webpack tree-shaking remove unused babel-polyfills?

Question

I try to make webpack tree-shaking remove unused babel-polyfill.

index.js file contains:

import 'babel-polyfill'
const add4 = n => n + 4
const add5 = n => n + 5
add4(6)

console.log('boom', add4(4))

In this file no code require any es2015+ polyfill, so I expected tree-shaking to remove the unused babel-polyfills in the bundled output. It's not the case, and the bundle still contains them (minified).

Here is a git repo with this code.

The webpack config:

const MinifyPlugin = require('babel-minify-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle-webpack.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new MinifyPlugin({ mangle: { topLevel: true } }, { comments: false })
  ]
}

and .babelrc:

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["chrome >= 50", "iOS >= 10", "ie >= 8"]
        },
        "useBuiltIns": true,
        "modules": false,
        "loose": true
      }
    ]
  ]
}

I tried to replace babel-minify-webpack-plugin with uglifyjs-webpack-plugin, but it gave the same result.

How is it possible to make tree-shaking work, and the output not contain any babel-polyfills which are not used in the original code?

Answer 1

Now I realize that babel-polyfill modifies the global scope where tree-shaking might have no effects...

This was a stupid question : )