Code bundled with webpack runs 5-10 times slower in Chrome than the same code not bundled with webpack

[everdimension]

Do you want to request a feature or report a bug?
I guess it's a bug.

What is the current behavior?
I'm measuring how much it takes to run an arbitrary slow (lots of iterations) function.
The thing I noticed is that when the code is bundled with webpack, the function takes 5-10 times longer to run than when I do not use webpack and just run code as is (copying imports to the file).

If the current behavior is a bug, please provide the steps to reproduce.
The problem can be reproduced in Chrome (i'm running on 61.0.3163.91).
In other browsers (safari and ff) there seems to be no difference, so there's no problem.

I have created a minimal demo where you can try to run the code yourself and see the results: https://everdimension.github.io/webpack-bundle-test/

Source code: https://github.com/everdimension/webpack-bundle-test

What is the expected behavior?
There should be no measurable performance difference between code bundled with webpack and one that is not.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

I'm running it on mac os 10.12.6
webpack@3.6.0
Chrome 61.0.3163.91

[sokra]

You seem to transpile the code in the webpack bundle with babel. This makes the generated code not identical:

function doComputations() {
  var iterations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100000000;

  var arr = [];
  for (var i = 0; i < iterations; i++) {
    var val = i * Math.sqrt(arr.length);
    if (arr.length > 1000000) {
      arr.length = 200000;
    }
    arr.push({ val: val });
  }
  return arr;
}

vs

 function doComputations(iterations = 100000000) {
    /* this function is an exact copy of `/src/doComputations.js` */
    const arr = [];
    for (var i = 0; i < iterations; i++) {
      const val = i * Math.sqrt(arr.length);
      if (arr.length > 1000000) {
        arr.length = 200000;
      }
      arr.push({ val });
    }
    return arr;
  }

My guess is using arguments makes the function not optimizable. Try to omit the default argument to see better performance.

cc @bmeurer: maybe an opportunity to optimize v8 for babel generated code?

[everdimension]

@sokra Your guess is correct, i've discussed the issue on reddit and we've discovered that this is indeed the reason behind this performance drop.

There also seem to exist relating issues in the babel repo: babel/babel#5922 and babel/babel#5776

They're closed, though.

[everdimension]

upd: Ok, the babel issues are closed because the PR that's considered a fix has already been merged.

It's in beta (babel v7.0.0) and requires you to add a special option to babel: { "loose": true } which would tell babel to transpile without referencing the arguments variable.

I guess that's the cost of transpilation.