Webpack 5 app load time slowdown

Bug report

What is the current behavior? Our app’s load time increased significantly when we upgraded to Webpack 5. Target for our app is ES2015.

The JavaScript execution time increased from 1.2s to 1.6s which is pretty significant. We narrowed it down to usage of arrow functions in Webpack 5 internal runtime code.

On using arrow functions in webpack’s internal code, the self time of functions like __webpack_require__ increased significantly. Ideally the self time for functions like this should be close to 0, which it is when it uses vanilla functions.

Webpack 5 by default uses es2015 in its internal code instead of es5 in Webpack 4. So, now the internal code uses () => {} instead of function() {}.

A solution for this would be to change the default value of arrowFunction to false instead of true in https://webpack.js.org/configuration/output/#outputenvironment.

If the current behavior is a bug, please provide the steps to reproduce. I have created a small repo to reproduce this. This repo was generated with gatsby.

Repo: https://github.com/atfzl/webpack5-arrow-function-slowdown

Start the dev server:

• npm install
• npm run start

Vanilla function

This will start the dev server at http://localhost:8000 with target: es5. This is our good build. Time to run the JavaScript: 83ms Get the timeline data from Chrome timeline for the app load. Chrome timeline vanilla function.json.zip

Stop the dev server.

Arrow function

Now change the line config.target = [`web`, `es5`] to config.target = [`web`, `es2015`] in node_modules/gatsby/dist/utils/webpack.config.js. Start the dev server again with npm run start.

Go to http://localhost:8000

Now the build served will have arrow functions in the internal code. Time to run the JavaScript: 117ms Get the timeline data from Chrome timeline for the app load. Chrome timeline arrow function.json.zip

The build with arrowFunction is taking 30-40% more time when running JavaScript. I’ve highlighted only one place where options.factory is taking more self time but there are other places as well. Same behavior with the production build as well.

You can also try experimenting with arrow functions and vanilla functions in the browser using local overrides in Chrome.

Changing the vanilla function to fat arrow in framework.js at this place increases the self time of options.factory at the place specified in the above screenshots of timeline.

What is the expected behavior? So, this is not actually a bug with Webpack but the default config provided degrades the performance. I couldn’t find a reason why arrow function is taking much more time. I’ll be opening an issue in V8 to find out the cause.

Other relevant information: webpack version: 5.30.0 Node.js version: 12.18.3 Operating System: macOS Big Sur 11.2.3 Additional tools:

[alexander-akait]

You can do it manually, the problems is not for all webpack users, it is also for all js users, and ideally should be fixed in v8, please open a bug in their bug tracker, if we even fix it, other scripts on your package can use it and you will have the same problem

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.