Parcel build includes all Core-js polyfills, or none at all #3742

andybflynn · 2019-11-04T11:50:46Z

🐛 bug report

When using .babelrc and specifying both targets and useBuiltIns: 'usage' I was expecting parcel to only include the core-js polyfills that were necessary to work with the targeted browsers. Instead all polyfills are including (making build size huge).

Alternatively, if import 'core-js/stable' is removed, then no polyfills are included.

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "core-js-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "core-js": "^3.3.6",
    "parcel-bundler": "^1.12.4"
  }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "Chrome >75, IE 11",
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

index.js

import 'core-js/stable';

const str = 'Hello';

const arr = Array.from(str);

console.log(`The string contains an H: ${arr.includes('H')}`);

index-alternative.js

const str = 'Hello';

const arr = Array.from(str);

console.log(`The string contains an H: ${arr.includes('H')}`);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test of Core JS</title>
</head>
<body>
  <div id="app">Loading</div>
  <script src="index.js"></script>
  <script src="index-alternative.js"></script>
</body>
</html>

🤔 Expected Behavior

I'm not exactly sure. I was expecting one of the index.js files to compile to a version where only the required polyfills was included, to polyfill the Array.prototype.From and Array.includes methods for IE 11:

require("core-js/modules/es.array.from");
require("core-js/modules/es.array.includes");
require("core-js/modules/es.string.includes");
require("core-js/modules/es.string.iterator");

😯 Current Behavior

When running parcel build index.html it outputs both js files:

filename	size	time	notes
dist/core-js-test.e032cec8.js	218.88 KB	297ms	includes the entirety of core-js
dist/index-alternative.5ae4bc85.js	1.22 KB	8ms	includes no polyfills at all

It's not clear from the documentation whether it's required to import core-js (I think it's not?) but if core-js isn't imported then the polyfills aren't included in the built script.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4
Node	8.6.0
npm/Yarn	5.4.2
Operating System	Mac OS Sierra 10.12.6

The text was updated successfully, but these errors were encountered:

DeMoorJasper · 2019-11-04T12:55:47Z

I don't think useBuiltins works in parcel 1 and we kind of don't recommend it in Parcel 2 either as it results in larger bundle sizes due to duplicate polyfills all over the place.

Probably even better to just include everything as that wouldn't cause duplicates.

andybflynn · 2019-11-04T19:48:34Z

So the workaround right now is to run Babel manually to derive which polyfills are needed, and then manually include those polyfills in the file so Parcel can bundle them?

DeMoorJasper · 2019-11-04T19:54:07Z

If you really wanna do all that work to save a small amount of data over the wire sure.

I'd just include it all

Keyes · 2019-11-20T12:38:00Z

If you really wanna do all that work to save a small amount of data over the wire sure.

I'd just include it all

Please read this carefully: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

core-js has ~180KB of minified filesize, wich equals slightly more than 1.5s of processing time on an average mobile phone, which are added to the time to interactive. It might seem like a rather small amount of data, but it is a huge downer on load times.

DeMoorJasper · 2019-11-20T13:01:43Z

@Keyes I’m aware of the impacts this has on performance.

Just kind of meant it’s probably not worth it although it highly depends on target audience. For a business app it probably does not matter. If you’re mainly targeting mobile every bit counts though as you pointed out.

Eventually tooling should do all these tweaks automatically. We’re receiving a lot of help on this field for Parcel 2.

_{Sent with GitHawk}

torotil · 2020-05-19T05:58:58Z

This is already resolved in the upcoming Parcel 2 and perhaps won’t be fixed in Parcel 1.

maerteijn · 2020-05-24T17:52:33Z

A workaround is described in #3216 by modifying the babel config for an environment you're building for. This works with Parcel 1.

Example:

.babelrc:

{
  "plugins": ["@babel/plugin-transform-object-assign"],
  "env": {
    "production": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "usage",
            "corejs": 3
          }
        ]
      ],
    }
  }
}

Parcel 1 will use this configuration and babel will add the needed polyfill imports for you. The plugins: [] section with at least one plugin is needed to make this work.

The import in index.js:

import 'core-js/stable'

is only needed when you use "useBuiltIns": "entry" (see the entry section in the babel docs) which is a different cup of thea, I can't get this to work with Parcel 1).

Now if you run:

parcel build index.js --no-minify

Babel will then add the following imports (and parcel the bundled modules):

require("core-js/modules/es.array.from");

require("core-js/modules/es.array.includes");

require("core-js/modules/es.string.includes");

require("core-js/modules/es.string.iterator");

github-actions · 2020-11-30T00:19:24Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

DeMoorJasper added the 🐛 Bug label Nov 4, 2019

github-actions bot added the Stale Inactive issues label May 19, 2020

github-actions bot removed the Stale Inactive issues label May 19, 2020

github-actions bot added the Stale Inactive issues label Nov 30, 2020

github-actions bot closed this as completed Dec 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parcel build includes all Core-js polyfills, or none at all #3742

Parcel build includes all Core-js polyfills, or none at all #3742

andybflynn commented Nov 4, 2019

DeMoorJasper commented Nov 4, 2019

andybflynn commented Nov 4, 2019

DeMoorJasper commented Nov 4, 2019

Keyes commented Nov 20, 2019 •

edited

Loading

DeMoorJasper commented Nov 20, 2019

torotil commented May 19, 2020

maerteijn commented May 24, 2020 •

edited

Loading

github-actions bot commented Nov 30, 2020

Parcel build includes all Core-js polyfills, or none at all #3742

Parcel build includes all Core-js polyfills, or none at all #3742

Comments

andybflynn commented Nov 4, 2019

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json

.babelrc

index.js

index-alternative.js

index.html

🤔 Expected Behavior

😯 Current Behavior

🌍 Your Environment

DeMoorJasper commented Nov 4, 2019

andybflynn commented Nov 4, 2019

DeMoorJasper commented Nov 4, 2019

Keyes commented Nov 20, 2019 • edited Loading

DeMoorJasper commented Nov 20, 2019

torotil commented May 19, 2020

maerteijn commented May 24, 2020 • edited Loading

github-actions bot commented Nov 30, 2020

Keyes commented Nov 20, 2019 •

edited

Loading

maerteijn commented May 24, 2020 •

edited

Loading