Improve esbuild’s DX during performance profiling

[iamakulov]

When you’re profiling esbuild’s bundle initialization, you might stumble upon a whole bunch of (anonymous) functions:

Frequently, many of these functions are esbuild’s own functions which don’t have a name:

This PR gives these functions a name and improves the debugging experience. Here’s how the first flamegraph looks after the change:

Minification / bundle size were not considered. Also, if you’d prefer an alternative function name, I’d be happy to update the PR!

[evanw]

Minification / bundle size were not considered

This is indeed the reason why these are arrow functions. Are you profiling minified or unminified code?

Edit: The reason why I'm asking is that for profiling, ideally each CommonJS wrapper would also be named with something that communicates which module it represents. That's a non-starter for minified code though.

[iamakulov]

Are you profiling minified or unminified code?

Unminified! I don’t have any DX expectations when debugging minified code.

[iamakulov]

Ideally each CommonJS wrapper would also be named with something that communicates which module it represents

That’s true! The second half of all (anonymous) functions in the flamegraph above is this:

__commonJS((exports, module) => { ... }))
//         ^

If that function’s name matched the file name, that’d be great. (Perhaps an algorithm similar to what esbuild uses for entrypoint names may be used? To avoid having lots of functions called index.)

// ../../../node_modules/semver/index.js
var require_1 = __commonJS(function semver(exports, module) {})

// ../../../node_modules/semver/getHash.js
var require_2 = __commonJS(function getHash(exports, module) {})
// or?
var require_2 = __commonJS(function semver_getHash(exports, module) {})
// or?
var require_2 = __commonJS(function semver_getHash(exports, module) {})

For comparison, webpack uses full module paths (relative to the project directory) for chunk names during development. This corresponds to optimization.moduleIds: 'named':

/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./a/index.js":
/*!********************!*\
  !*** ./a/index.js ***!
  \********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "a": () => (/* binding */ a)
/* harmony export */ });
const a = 5;


/***/ }),

/***/ "./node_modules/moment/locale/af.js":
/*!******************************************!*\
  !*** ./node_modules/moment/locale/af.js ***!
  \******************************************/
/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {

//! moment.js locale configuration
//! locale : Afrikaans [af]
//! author : Werner Mollentze : https://github.com/wernerm

;(function (global, factory) {
    true ? factory(__webpack_require__(/*! ../moment */ "./node_modules/moment/moment.js")) :
   0
}(this, (function (moment) { 'use strict';
...

[evanw]

I'm planning to address this by also naming the per-module function wrappers, and by making sure that this feature doesn't impact non-minified size. My PR for that is here: #1244.