Each imported SVG brings a separate copy of `extends` (Object.assign) function

[jakub-g]

I guess this is related to babel plugins config.

Say you have the following code in the source file:

import XXX from 'app/icons/XXX.svg'
import YYY from 'app/icons/YYY.svg'

The output I get from this from webpack is as follows (I am using preact-compat alias as described in #290 hence calls are to preact, not react):

// CONCATENATED MODULE: ./app/icons/XXX.svg
function XXX_extends() { XXX_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return XXX_extends.apply(this, arguments); }

/* harmony default export */ var XXX = (({
  styles = {},
  ...props
}) => preact_compat_es["a" /* default */].createElement("svg", XXX_extends({
  viewBox: "0 0 50 50",
  xmlns: "http://www.w3.org/2000/svg"
}, props), preact_compat_es["a" /* default */].createElement("circle", {
...
}), preact_compat_es["a" /* default */].createElement("path", {
...
})));

// CONCATENATED MODULE: ./app/icons/YYY.svg
function YYY_extends() { YYY_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return YYY_extends.apply(this, arguments); }


/* harmony default export */ var YYY = (({
  styles = {},
  ...props
}) => preact_compat_es["a" /* default */].createElement("svg", YYY_extends({
  viewBox: "0 0 50 50",
  xmlns: "http://www.w3.org/2000/svg"
}, props), preact_compat_es["a" /* default */].createElement("circle", {
...
}), preact_compat_es["a" /* default */].createElement("path", {
...
})));

Note that XXX_extends and YYY_extends are exactly the same function under the hood.

So basically when you import 20 SVGs you will have 20 copies of the same function in the bundle.

I think this is an issue with Babel but unclear how to get rid of this.

---

Edit1: after changing some other config, I also got this function per each module:

function XXX_objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

---

Edit2:

This comes from the following babel plugin:

    ['transform-object-rest-spread', { useBuiltIns: true }],

The fact that it appears multiple times in the output under different names is probably due to the following:

1. babel-loader loads each file in separation
2. webpack concatenates the modules
3. It sees there's multiple variables names _extends provided by babel, but it can't know (unless it does AST analysis) that they're all pure functions that do the same thing, and it can't "merge" them together, so it instead renames all the variables in the scopes
4. As a result there are 20 variables which are all the same.

[jakub-g]

Probably not much that can be done at the level of this package apart from maybe documenting it. It's an issue with how babel/webpack work.