Babel optimization: require helpers instead of inlining them

[Ivan Akulov]

By installing babel-plugin-transform-runtime and babel-runtime, developers might remove duplicated Babel helpers across their bundle: https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

We should add this to the list of optimizations.

[Jacob Groß]

In my case adding those actually increases the bundle size, so ymmv:
Before: http://prntscr.com/jofzbf
After: http://prntscr.com/jofz6g
(however this is one bundle, it might only apply to multiple-bundle configs)

[Ivan Akulov]

Oh wow. Looks like the bundle got increased because of core-js – and I think this might be the reason:

(From https://babeljs.io/docs/plugins/transform-runtime/#why)

I’ll check how it works with polyfills and regenerator disabled as soon as I get time:

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

[Jacob Groß]

Using that config (I also tried regenerator: false) it results in a 3 kB larger bundle for me - as parts of core-js are added.

[Ivan Akulov]

Hm. Finally tested this with a production Next.js app and @babel/plugin-transform-runtime@7.0.0-beta.42, and it looks like this consistently makes all bundles several kBs smaller:

(Left is with the plugin; right is without it)

• I used beta.42 and not rc.3 because Next.js is stuck on this Babel version.
• I used default plugin settings.

Do you, by chance, remember the project/bundle you were testing this on?

[Jacob Groß]

I don't really know what happened, but using 7.0.0 it indeed reduces my bundle size (3 kB). Using the exact same setup, just upgraded deps.

side note: polyfill got removed