Karma replace webpack with esbuild + babel

[marvinhagemeister]

This PR swaps out webpack with esbuild as our bundler of choice. I've tried rollup too in #2894 but that leads to out of heap space errors (tries to allocate more than 2GB). As expected, esbuild takes the lead by taking up only a fraction of RAM compared to the competition. That holds true, despite the comparably slow babel pass in place. Without that esbuild compiles and bunldes our whole suite in just ~500ms.

With esbuild we enjoy a similarly readable output like we would have with rollup. So we get the same benefits as in #2894, just a lot faster and with a fraction of the RAM cost.

Before:

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDisplayName", function() { return getDisplayName; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCurrentVNode", function() { return getCurrentVNode; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getOwnerStack", function() { return getOwnerStack; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setupComponentStack", function() { return setupComponentStack; });
/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ "./src/index.js");

var oldDiff = preact__WEBPACK_IMPORTED_MODULE_0__["options"].__b;
var oldDiffed = preact__WEBPACK_IMPORTED_MODULE_0__["options"].diffed;
var oldRoot = preact__WEBPACK_IMPORTED_MODULE_0__["options"].__;
var oldVNode = preact__WEBPACK_IMPORTED_MODULE_0__["options"].vnode;
var oldRender = preact__WEBPACK_IMPORTED_MODULE_0__["options"].__r;

preact__WEBPACK_IMPORTED_MODULE_0__["options"].diffed = function (vnode) {
  if (isPossibleOwner(vnode)) {
    ownerStack.pop();
  }
 
  renderStack.pop();
  if (oldDiffed) oldDiffed(vnode);
};

After:

// Note: All imports are already hoisted in the right scope
function setupComponentStack() {
  var oldDiff = options_default.__b;
  var oldDiffed = options_default.diffed;
  var oldRoot = options_default.__;
  var oldVNode = options_default.vnode;
  var oldRender = options_default.__r;
  options_default.diffed = function(vnode) {
    if (isPossibleOwner(vnode)) {
      ownerStack.pop();
    }
    renderStack.pop();
    if (oldDiffed)
      oldDiffed(vnode);
};

[github-actions]

📊 Tachometer Benchmark Results

Summary

• ⏱ 02_replace1k
• ⏱ 07_create10k
• ⏱ hydrate1k
• ⏱ many_updates

duration

• 03_update10th1k_x16: unsure 🔍 -4% - +4% (-1.37ms - +1.50ms)
  ^{preact-local vs preact-master}
• ⏱ filter_list: unsure 🔍 -2% - +1% (-0.44ms - +0.36ms)
  ^{preact-local vs preact-master}
• ⏱ text_update: unsure 🔍 -5% - +3% (-0.17ms - +0.12ms)
  ^{preact-local vs preact-master}

usedJSHeapSize

• 03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.01ms - +0.00ms)
  ^{preact-local vs preact-master}
• ⏱ filter_list: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
  ^{preact-local vs preact-master}
• ⏱ text_update: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
  ^{preact-local vs preact-master}

Results

⏱ 02_replace1k

Currently running in CI #666…

03_update10th1k_x16

• Browser: chrome-headless 87.0.4280.88
• Sample size: 90
• Built by: CI #666

• Commit: aaa72b3

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	35.13ms - 37.08ms	-	unsure 🔍 -4% - +4% -1.50ms - +1.37ms
preact-local	35.11ms - 37.22ms	unsure 🔍 -4% - +4% -1.37ms - +1.50ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	3.52ms - 3.53ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.01ms
preact-local	3.52ms - 3.53ms	unsure 🔍 -0% - +0% -0.01ms - +0.00ms	-

⏱ 07_create10k

Currently running in CI #666…

⏱ filter_list

• Browser: chrome-headless 87.0.4280.88
• Sample size: 50
• Built by: CI #666

• Commit: aaa72b3

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	24.95ms - 25.51ms	-	unsure 🔍 -1% - +2% -0.36ms - +0.44ms
preact-local	24.90ms - 25.47ms	unsure 🔍 -2% - +1% -0.44ms - +0.36ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	1.60ms - 1.60ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	1.60ms - 1.60ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

⏱ hydrate1k

Currently running in CI #666…

⏱ many_updates

Currently running in CI #666…

⏱ text_update

• Browser: chrome-headless 87.0.4280.88
• Sample size: 140
• Built by: CI #666

• Commit: aaa72b3

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	3.41ms - 3.62ms	-	unsure 🔍 -3% - +5% -0.12ms - +0.17ms
preact-local	3.40ms - 3.59ms	unsure 🔍 -5% - +3% -0.17ms - +0.12ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	0.83ms - 0.83ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	0.83ms - 0.83ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

_{tachometer-reporter-action v2 for CI}

[github-actions]

Size Change: 0 B

Total Size: 41.7 kB

ℹ️ View Unchanged

Filename	Size	Change
compat/dist/compat.js	3.24 kB	0 B
compat/dist/compat.module.js	3.25 kB	0 B
compat/dist/compat.umd.js	3.29 kB	0 B
debug/dist/debug.js	2.99 kB	0 B
debug/dist/debug.module.js	2.98 kB	0 B
debug/dist/debug.umd.js	3.07 kB	0 B
devtools/dist/devtools.js	185 B	0 B
devtools/dist/devtools.module.js	195 B	0 B
devtools/dist/devtools.umd.js	261 B	0 B
dist/preact.js	4.03 kB	0 B
dist/preact.min.js	4.06 kB	0 B
dist/preact.module.js	4.05 kB	0 B
dist/preact.umd.js	4.1 kB	0 B
hooks/dist/hooks.js	1.13 kB	0 B
hooks/dist/hooks.module.js	1.15 kB	0 B
hooks/dist/hooks.umd.js	1.2 kB	0 B
jsx-runtime/dist/jsxRuntime.js	327 B	0 B
jsx-runtime/dist/jsxRuntime.module.js	335 B	0 B
jsx-runtime/dist/jsxRuntime.umd.js	405 B	0 B
test-utils/dist/testUtils.js	437 B	0 B
test-utils/dist/testUtils.module.js	439 B	0 B
test-utils/dist/testUtils.umd.js	515 B	0 B

_{compressed-size-action}

[coveralls]

Coverage remained the same at 99.609% when pulling aa6c1f1 on karma-esbuild2 into 930ee5a on master.

[marvinhagemeister]

The benchmarks fail because we exceeded the free tier minutes.

[JoviDeCroock]

Wow! Nice work