【Web技術】1395- Esbuild Bundler HMR

Esbuild 雖然 bundler 非常快，但是其沒有提供 HMR 的能力，在開發過程中隻能采用 live-reload 的方案，一有代碼改動，頁面就需要全量 reload ，這極大降低開發體驗。為此添加 HMR 功能至關重要。

經過調研，社群内目前存在兩種 HMR 方案，分别是 Webpack/ Parcel 為代表的 Bundler HMR 和 Vite 為代表的 Bundlerless HMR。經過考量，我們決定實作 Bundler HMR，在實作過程中遇到一些問題，做了一些記錄，希望大家有所了解。

ModuleLoader 子產品加載器

Esbuild 本身具有 Scope hosting 的功能，這是生産模式經常會開啟的優化，會提高代碼的執行速度，但是這模糊了子產品的邊界，無法區分代碼具體來自于哪個子產品，針對子產品的 HMR 更無法談起，為此需要先禁用掉 Scope hosting 功能。由于 Esbuild 未提供開關，我們隻能舍棄其 Bundler 結果，自行 Bundler。

受 Webpack 啟發，我們将子產品内的代碼轉換為 Common JS，再 wrapper 到我們自己的 Moduler loader 運作時，其中循環依賴的情況需要提前導出 module.exports 需要注意一下。

轉換為 Common JS 目前是使用 Esbuild 自帶的 transform，但需要注意幾個問題。

Esbuild dynamic import 遵循浏覽器 target 無法直接轉換 require，目前是通過正則替換 hack。
Esbuild 轉出的代碼包含一些運作時代碼，不是很幹淨。
代碼内的宏（process.env.NODE_ENV 等）需要注意進行替換。

比如下面的子產品代碼的轉換結果：

// a.ts
import { value } from 'b'

// transformed to 
 moduleLoader.registerLoader('a'/* /path/to/a */, (require, module, exports) => {
  const { value } = require('b');

});

Cjs 動态導出子產品的特性。

export function name(a) {
    return a + 1
}

const a = name(2)
export default a

如上子產品轉換後結果如下：

var __defProp = Object.defineProperty;
var __export = (target, all) => {
  for (var name2 in all)
    __defProp(target, name2, { get: all[name2], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var entry_exports = {};
// 注意這裡
__export(entry_exports, {
  default: () entry_default,
  name: () name
});
module.exports = __toCommonJS(entry_exports);
function name(a2) {
  return a2 + 1;
}
var a = name(2);
var entry_default = a;

注意兩部分：

第 7 行代碼可以看到， ESM 轉 CJS 後會給子產品加上 __esModule 标記。
第 10 行代碼中可以看到，CJS 的導出是 computed 的， module.exports 指派時需要保留 computed 導出。

ModuleLoader 的實作注意相容此行為，僞代碼如下：

class Module {
    _exports = {}
    get exports() {
        return this._exports
    }
    set exports(value) {
        if(typeof value === 'object' && value) {
            if (value.__esModule) {
                this._exports.__esModule = true;
            }
            for (const key in value) {
                Object.defineProperty(this._exports, key, {
                  get: () value[key],
                  enumerable: true,
                });
            }
        }
    }
}

由于 Scope Hosting 的禁用，在 bundler 期間無法對子產品的導入導出進行檢查，隻能得到在運作期間的代碼報錯，Webpack 也存在此問題。

Module Resolver

雖然對子產品進行了轉換，但無法識别 alias，node_modules 等子產品。

如下面例子， node 子產品

無法被執行，因為其注冊時是

/path/to/b

// a.ts
import { value } from 'b'

另外，由于 HMR API 接受子子產品更新也需要識别子產品。

module.hot.accpet('b', () {})

有兩種方案來解決：

Module URL Rewrite

Webpack/Vite 等都采用的是此方案，對子產品導入路徑進行改寫。

注冊映射表

由于 Module Rerewrite 需要對

import

子產品需要分析，會有一部分開銷和工作量，為此采用注冊映射表，在運作時進行映射。如下：

moduleLoader.registerLoader('a'/* /path/to/a */, (require, module, exports) => {
  const { value } = require('b');
  expect(value).equal(1);
});
moduleLoader.registerResolver('a'/* /path/to/a */, {
   'b': '/path/to/b'
 });

HMR

當某個子產品發生變化時，不用重新整理頁面就可以更新對應的子產品。

首先看個 HMR API 使用的例子：

// bar.js
import foo from './foo.js'

foo()

if (module.hot) {
  module.hot.accept('./foo.js' ,(newFoo) => {
    newFoo.foo()
  })
}

在上面例子中，

bar.js

是

./foo.js

的 HMR

Boundary

，即接受更新的子產品。如果

./foo.js

發生更新，隻要重新執行

./foo.js

并且執行第七行的 callback 即可完成更新。

具體的實作如下：

構模組化塊依賴圖。

在 ModuleLoader 過程中，執行子產品的同時記錄了子產品之間的依賴關系。

img

如果子產品中含有 module.hot.accept 的 HMR API 調用則将子產品标記成 boundary。

img

當子產品發生變更時，會重新生成此子產品相關的最小 HMR Bundle，并且将其通過 websocket 消息告知浏覽器此子產品發生變更，浏覽器端依據子產品依賴圖尋找 boundaries，并且開始重新執行子產品更新以及相應的 calllback。

img

注意 HMR API 分為

接受子子產品的更新

和

接受自更新

，在查找 HMR Boundray 的過程需要注意區分。

目前，隻在 ModulerLoader 層面支援了

accpet

dispose

API。

Bundle

由于子產品轉換後沒有先後關系，我們可以直接把代碼進行合并即可，但是這樣會缺少 sourcemap。

為此，進行了兩種方案的嘗試：

Magic-string Bundle + remapping

僞代碼如下：

import MagicString from 'magic-string';
import remapping from '@ampproject/remapping';

const module1 = new MagicString('code1')
const module1Map = {}
const module2 = new MagicString('code2')
const module2Map = {}

function bundle() {
    const bundle = new MagicString.Bundle();
    bundle.addSource({
      filename: 'module1.js',
      content: module1
    });
    bundle.addSource({
      filename: 'module2.js',
      content: module2
    });
    const map = bundle.generateMap({
      file: 'bundle.js',
      includeContent: true,
      hires: true
    });
    remapping(map, (file) => {
        if(file === 'module1.js') return module1Map
        if(file === 'module2.js') return module2Map
        return null
    })
    return {
        code: bundle.toString(),
        map: 
    }
}

實作過後發現二次建構存在顯著的性能瓶頸，remapping 沒有 cache 。

Webpack-source

僞代碼如下：

import { ConcatSource, CachedSource, SourceMapSource } from 'webpack-sources';

const module1Map = {}
const module1 = new CachedSource(new SourceMapSource('code1'), 'module1.js', module1Map)
const module2 = new CachedSource(new SourceMapSource('code2'), 'module2.js', module1Map)

function bundle(){
    const concatSource = new ConcatSource();
    concatSource.add(module1)
    concatSource.add(module2)
    const { source, map } = concatSource.sourceAndMap();
    return {
      code: source,
      map,
    };
}

其

CacheModule

有每個子產品的 sourcemap cache，内部的 remapping 開銷很小，二次建構是方案一的數十倍性能提升。

另外，由于 esbuild 因為開啟了生産模式的優化，

metafile.inputs

中并不是全部的子產品，其中沒有可執行代碼的子產品會缺失，是以合并代碼時需要從子產品圖中查找全部的子產品。

Lazy Compiler（未實作）

頁面中經常會包含 dynamic import 的子產品，這些子產品不一定被頁面首屏使用，但是也被 Bundler，是以 Webpack 提出了 Lazy Compiler 。Vite 利用 ESM Loader 的 unbundler 天生避免了此問題。

React Refresh

What is React Refresh and how to integrate it .

和介紹的一樣，分為兩個過程。

将源代碼通過 react-refresh/babel 插件進行轉換，如下：

function FunctionDefault() {
  return <h1>Default Export Function</h1>;
}

export default FunctionDefault;

轉換結果如下：

var _jsxDevRuntime = require("node_modules/react/jsx-dev-runtime.js");
function FunctionDefault() {
    return (0, _jsxDevRuntime).jsxDEV("h1", {
        children: "Default Export Function"
    }, void 0, false, {
        fileName: "</Users/bytedance/bytedance/pack/examples/react-refresh/src/FunctionDefault.tsx>",
        lineNumber: 2,
        columnNumber: 10
    }, this);
}
_c = FunctionDefault;
var _default = FunctionDefault;
exports.default = _default;
var _c;
$RefreshReg$(_c, "FunctionDefault");

依據 bundler hmr 實作加入一些 runtime。

var prevRefreshReg = window.$RefreshReg$;
var prevRefreshSig = window.$RefreshSig$;
var RefreshRuntime = require('react-refresh/runtime');
window.$RefreshReg$ = (type, id) => {
  RefreshRuntime.register(type, fullId);
} 
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
// source code
window.$RefreshReg$ = prevRefreshReg;
window.$RefreshSig$ = prevRefreshSig;
// accept self update
module.hot.accept();
const runtime = require('react-refresh/runtime');
let enqueueUpdate = debounce(runtime.performReactRefresh, 30);
enqueueUpdate();

Entry 加入下列代碼。

const runtime = require('react-refresh/runtime');
  runtime.injectIntoGlobalHook(window);
  window.$RefreshReg$ = () {};
  window.$RefreshSig$ = () type => type;

注意這些代碼需要運作在 react-dom 之前。

【Web技術】1395- Esbuild Bundler HMR

ModuleLoader 子產品加載器

Module Resolver

HMR

Bundle

React Refresh

繼續閱讀

IDA反編譯器的使用

webpack的基礎概念

Hexo主題next中添加天氣插件（心知天氣）

如何更改應用在app store的名稱

asp.net項目使用bundle

Vitamio 初步使用

Android AsyncTask 異步任務

Android 用Intent 傳遞對象之 Parcel

android hover監控滑鼠移動事件

android筆記--儲存和恢複activity的狀态資料

元宇宙場景技術實踐｜實作“虛拟人”自由

Android 實作點選震動效果

RobHess的SIFT環境配置

一個進階 CSS 面試題：在 CSS 中實作 if-else

13 個你應該知道的 Webpack 優化技巧

Pandora Boot

【Web技術】1395- Esbuild Bundler HMR

ModuleLoader 子產品加載器​

​ Module Resolver

HMR

Bundle

React Refresh

繼續閱讀

ModuleLoader 子產品加載器

Module Resolver