chore(core): replace microbundle with esbuild

[MurakamiShinyu]

vivliostyle.js/core のビルドに microbundle を使用していたのを esbuild に変更しました。

ビルド結果のJSコードサイズが大きくなる問題を解決

変更の理由は、microbundleでのビルドはBebelでの変換が使われるために、ビルド結果のサイズが大きくなることがあるためです。Vivliostyleは古いブラウザはサポートしていないため、Babelでの変換は不要です。

とくにUnicode character class escape （\p{Zs} など）を使った正規表現がBabelによってこの機能を使用しない正規表現に変換されるのでとても大きくなっていました。例えば、 /^[\s\p{Zs}\p{P}\p{Mn}]*[\p{L}\p{N}]\p{Mn}*(?:[\s\p{Zs}]*\p{P}\p{Mn}*)*/u という73バイトの正規表現が、ビルド後のコードでは 24KB もある巨大な正規表現（元のサイズの330倍）に変換されていました。

esbuildに変更したことで、ビルド結果の vivliostyle.js のサイズが 795832 から 594576 に縮小されました。

試行錯誤したこと

• yarn dev で esbuild の --watch が終了してしまう問題にぶつかった。次のissueを見つけて、--watch=forever を使うことで解決できることがわかった：

  • Since 0.12.17, --watch fail silently when running under lerna evanw/esbuild#1885

• ビルドができて実行すると「TypeError: Cannot read properties of undefined (reading '0')」というエラーが発生した。

  • packages/core/src/vivliostyle/matchers.ts　の NthFragmentMatcher.fragmentIndices が undefined になっていた。classのstatic fieldの初期化がうまくいっていないようだ。

  • 調べたところ、esbuild の v0.18.5 での次の変更が原因であることがわかった：

    • https://github.com/evanw/esbuild/releases/tag/v0.18.5

      • Static fields with assign semantics now use static blocks if possible

        Setting useDefineForClassFields to false in TypeScript requires rewriting class fields to assignment statements. > Previously this was done by removing the field from the class body and adding an assignment statement after the class declaration. However, this also caused any private fields to also be lowered by necessity (in case a field initializer uses a private symbol, either directly or indirectly). This release changes this transform to use an inline static block if it's supported, which avoids needing to lower private fields in this scenario:

  • tsconfig.json に "useDefineForClassFields": true を追加することで解決した。

• esbuild は d.ts ファイルを生成しない。tsc --emitDeclarationOnly で d.ts ファイルを生成するようにした。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vivliostyle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 13, 2024 9:18am