© PLAID, Inc.ɹ|ɹConfidential Rollupのビルド時間 高 速化による プレビュー表 示 速度改善と バンドラとASTを駆使した プロダクト開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 株式会社プレイド 川 口 和也 2024-04-09 プロダクトを加速せよ - バンドル ・ 静的解析 ・ レンダリングの限界を押し広げる技術者たち 

© PLAID, Inc.ɹ|ɹConfidential 自己 紹介 川 口 和也 (kazupon) Kazuya Kawaguchi GitHub : @kazupon X : @kazu_pon BlueSky: @kazupon • 株式会社プレイド • Engineer • Product area • Developer Experimence チーム © PLAID, Inc.ɹ|ɹConfidential 2 

© PLAID, Inc.ɹ|ɹConfidential 3 株式会社プレイドについて © PLAID, Inc.ɹ|ɹConfidential OUR MISSION データによって 人 の価値を最 大 化する 

© PLAID, Inc.ɹ|ɹConfidential プレイドの全体戦略 “マルチチャネル × 1st Party Customer Data × リアルタイム” をワンストップで提供 するプラットフォーム © PLAID, Inc.ɹ|ɹConfidential 4 1st Party Customer Data 戦略策定/ 事業 ・ 組織開発 広告 市場調査/ 顧客調査 カスタマーサポート マーケティングオートメーション オフライン/OMO オンサイト マーケティング EmotionTech CX/ EX KARTE Signals Databeat KARTE RightSupport STUDIO ZERO KARTE Message KARTE TALK KARTE Web/App KARTE Blocks 

© PLAID, Inc.ɹ|ɹConfidential KARTEについて © PLAID, Inc.ɹ|ɹConfidential 5 CX(顧客体験)プラットフォーム 一人 ひとりに合わせた 顧客体験を提供 WebやAppの訪問者の 行 動を 顧客ごとにリアルタイムに解析 

© PLAID, Inc.ɹ|ɹConfidential Stats of KARTE © PLAID, Inc.ɹ|ɹConfidential 6 データ規模も爆発的に増加 199 億UU 累計ユーザー数 ※1 0.x 秒/解析 解析速度 134,000 over 秒間トラッキング数 ※3 2.59 兆円 年間解析流通 金 額 ※2 ※1 ローンチ〜2023年2 月 までのユニークユーザー数の実績 ※ 2 EC領域における解析流通 金 額。2022年3 月 〜2023年2 月 までの単年の実績 ※3 閲覧、クリック、購 入 などKARTEで計測しているユーザーの全イベントが 対象。ローンチ〜2023年3 月 までにおける最 大 値 

© PLAID, Inc.ɹ|ɹConfidential 本 日 のアジェンダ 1 . はじめに 2 . エレメントビルダーについて 3 . Rollupを使ったプレビュー表 示 改善 4 . RollupからRolldownへの移 行 5 . バンドラとASTを使ったプロダクト 開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 7 

© PLAID, Inc.ɹ|ɹConfidential 本 日 のアジェンダ 1 . はじめに 2 . エレメントビルダーについて 3 . Rollupを使ったプレビュー表 示 改善 4 . RollupからRolldownへの移 行 5 . バンドラとASTを使ったプロダクト 開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 8 

© PLAID, Inc.ɹ|ɹConfidential はじめに • Rollupを使ったプロダクトにおけるパフォーマンス チューニングの話 • 2024年末にv 1 ベータ版がリリースされたRolldown導 入 取り組みの話 • バンドラ & AST を使ったプロダクト開発の難しさ 本 日 話すこと © PLAID, Inc.ɹ|ɹConfidential 9 

© PLAID, Inc.ɹ|ɹConfidential 本 日 のアジェンダ 1 . はじめに 2 . エレメントビルダーについて 3 . Rollupを使ったプレビュー表 示 改善 4 . RollupからRolldownへの移 行 5 . バンドラとASTを使ったプロダクト 開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 10 

© PLAID, Inc.ɹ|ɹConfidential エレメントビルダー コーディングスキル不要で アクションのフルカスタマ イズが可能なエディタ。 エディタUI と豊富なエレメ ント(コンポーネント)で、 アクションを編集できる ノーコードで アクションを 編集できるエディタ © PLAID, Inc.ɹ|ɹConfidential 11 (注意: 正式リリース時には名称変更予定) 

© PLAID, Inc.ɹ|ɹConfidential 本 日 のアジェンダ 1 . はじめに 2 . エレメントビルダーについて 3 . Rollupを使ったプレビュー表 示 改善 4 . RollupからRolldownへの移 行 5 . バンドラとASTを使ったプロダクト 開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 12 

© PLAID, Inc.ɹ|ɹConfidential エレメントビルダーのプレビュー表 示 課題 Core Web Vitals の インタラ クション UI遅延指標 INP 2 0 0 ms 以下になっていな い… エディタの インタラクションによる プレビュー表 示 が遅い… © PLAID, Inc.ɹ|ɹConfidential 13 

© PLAID, Inc.ɹ|ɹConfidential プレビューの遅延時間の計測 © PLAID, Inc.ɹ|ɹConfidential 14 • action:build エディタでアクション編集後、action-compilerでアクションのビルドに 用 した時間 • action:rendering ビルドされたアクションをプレビューのiframe内で評価(eval)し、Svelteによってレンダリ ングに 用 した時間 • action:rendered iframe内でアクションが(再)レンダリングされた後、プレビューのホスト(エディタ) 側でプ レビュー表 示 の後処理に 用 した時間 DevTools Performance パネルで performance.mark と performance.measure API を使って以下のようなラベルを定義して計測 

© PLAID, Inc.ɹ|ɹConfidential DevTools Performance パネルにおける計測ポイントの視覚化 © PLAID, Inc.ɹ|ɹConfidential 15 Core Web Vitials で計測できない部分を独 自 計測によって補う事で、 ひと 目 でプレビューのパフォーマンスを確認できるようにしている 3つの計測値の合計値がプレビューのパフォーマンス。数値が 小 さくなるようにしなければならない 

© PLAID, Inc.ɹ|ɹConfidential プレビュー表 示 の遅延時間はどのぐらいかかっていたのか 計測条件は以下のように、DevTools throttling を使って ユーザー環境に近い形で実施 • CPU: “ 4 x slodown” • Network: “Fast 4 G” エディタによるインタラクション 後、平均1,680ms かかっていた © PLAID, Inc.ɹ|ɹConfidential 16 • action:build: 平均 1,200 ms • action:rendering: 平均 210 ms • action:rendered: 平均 270 ms • 計: 平均 1,680ms action:build、つまりaction-compilerによるビル ドがボトルネックになっているので、action- cmpilerを最適化すれば改善効果が 高 い 

© PLAID, Inc.ɹ|ɹConfidential action-compilerの処理内容の分析 © PLAID, Inc.ɹ|ɹConfidential 17 • アクションが依存する静的なJavaScriptモジュール • action-sdk • svelte • action-compiler では内部でRollupを使っており、これらモジュールが毎 回内部のバンドルプロセスで処理されてしまっている 分析した結果、エディタ編集の都度変わるアクションのコードだけでなく、変更がない静 的なJavaScriptモジュールもいっしょに毎回 Rollup によってバンドルされてしまっている 

© PLAID, Inc.ɹ|ɹConfidential Rollupのバンドルプロセス Rollupのバンドルプロセスは CPUコストが 高 い！ © PLAID, Inc.ɹ|ɹConfidential 18 Buildフェーズ: 公式ドキュメントの図より https://rollupjs.org/plugin-development/ • Build フェーズ • JavaScript モジュールのimport構 文 から静的解 析して依存関係からModule Graphを構築する • 依存を解決できたJavaScriptモジュールを読み 込んでJavaScript parserでAST変換も 行 う • Output Generationフェーズ • 構築されたModule Graphを元にコードにレン ダリングしてバンドルする • 必要に応じて、tree-shaking、code splitting、 minifyをする Module graph 

© PLAID, Inc.ɹ|ɹConfidential action-compilerのビルド時間削減案 © PLAID, Inc.ɹ|ɹConfidential 19 1 . action-sdk、svelte の事前AST変換 Rollupのloadフックの特性を利 用 した案 2 . action-sdk、svelte の事前バンドル プレビュー側でで事前バンドルしたaction-sdk、svelteをロードしてRollupの処 理を減らすという案 3 . ビルド辞めて独 自 ASTでプレビューをレンダリングする Rollupによるビルドを辞めて、アクションのコードを独 自 ASTに変換して、それを元にpreviewモジュー ルでレンダリングする案 action-compilerのビルド時間削減するため以下の案を検討した 

© PLAID, Inc.ɹ|ɹConfidential ビルド時間削減の決定 © PLAID, Inc.ɹ|ɹConfidential 20 1 . action-sdk、svelte の事前AST変換 Rollupのloadフックの特性を利 用 した案 2 . action-sdk、svelte の事前バンドル プレビュー側でで事前バンドルしたaction-sdk、svelteをロードしてRollupの処 理を減らすという案 3 . ビルド辞めて独 自 ASTでプレビューをレンダリングする Rollupによるビルドを辞めて、アクションのコードを独 自 ASTに変換して、それを元にpreviewモジュー ルでレンダリングする案 検討した結果、「action-sdk、svelteの事前バンドル」の案に 

© PLAID, Inc.ɹ|ɹConfidential ビルド時間削減の考察 © PLAID, Inc.ɹ|ɹConfidential 21 1 . action-sdk、svelte の事前AST変換 AST変換コストがスキップされるためRollupのバンドルプロセスを削減できそうであるが、依然としてaction- sdk、svelteのAST変換以外のバンドルプロセスは以前のそのまま残り、効果が少なそう 2 . action-sdk、svelte の事前バンドル プレビュー側でaction-sdk、svleteをimportしているコード部分をwindowオブジェクト経由にコード変換する Rollupプラグインが必要。ただ、action-sdk、svelteはバンドル対象になっていないので、それらの分バンドル プロセスのコストを削減できる 3 . ビルド辞めて独 自 ASTでプレビューをレンダリングする 一 番劇的な効果がありエレメントビルダーの将来を 見 据えた案であるが、プレビューのためにレンダリングする 仕組みを作り直し(アーキテクチャの検討)が必要で開発コストが 高 い。 プレビューのアクションと配信されるアクションの実装差分によるバグを 生 み出しやすいリスクがある 

© PLAID, Inc.ɹ|ɹConfidential ビルド時間削減実装 方 針 バージョン別のパッケー ジとして実装し、エディタ への動作影響を最 小 限に する action-compiler-v 2 を 作り、エディタ側で切り 替えられるようにする © PLAID, Inc.ɹ|ɹConfidential 22 

© PLAID, Inc.ɹ|ɹConfidential action-compiler-v 2 のバンドルの流れ © PLAID, Inc.ɹ|ɹConfidential 23 プレビュー、配信向けを想定して、aciton-sdk、svelteを事前バンドル するために、Rollupで2段階によるバンドルをする 

© PLAID, Inc.ɹ|ɹConfidential action-compiler-v 2 の実装: 事前バンドルのRollupコード __IS_RUN_ON_BROWSER__ フラグによって プレビュー向け、配信向けに、action- compiler-v 2 が最適化されるようになる • __IS_RUN_ON_BROWSER__フラグ on : プレビュー向けには、 window.__preview__ 経由でこれらモ ジュールが使われて動作するコードが action-compiler-v 2 に同包される • __IS_RUN_ON_BROWSER__フラグ off : プレビュー向けのコードは同包されない 事前バンドルでは、プレ ビュー向け、配信向けに最適 化されたバンドルがされるよ うに実装する © PLAID, Inc.ɹ|ɹConfidential 24 

© PLAID, Inc.ɹ|ɹConfidential action-compiler-v 2 の実装: import構 文 を変換するRollupプラグイン import 構 文 に指定される ModuleSpecifier を importToVariableMap を使っ てwindow.__preview__ にバ インドできるよう変換する Transform フック内 で、アクションのコード を解析してaction-sdk、 svelte をimportしてい るコードを変換する © PLAID, Inc.ɹ|ɹConfidential 25 

© PLAID, Inc.ɹ|ɹConfidential ビルド最適化の結果と考察 action:buildは10倍近い改善！ Action:renderingも改善されているのは、アクションの コードのみがRollupでビルドされ評価(eval)されているため トータルで平均460msという 約4倍近い改善！ © PLAID, Inc.ɹ|ɹConfidential 26 • action:build: 平均 110 ms (最適化前: 平均1,200ms) • action:rendering: 平均 80 ms (最適化前: 平均210ms) • action:rendered: 平均 270 ms (最適化前: 平均 270m) • 計: 平均 460ms 最適化前: 平均1,680m) 

© PLAID, Inc.ɹ|ɹConfidential さらなるaction-compiler-v 2 の最適化 配信向けのアクションをビルドす る環境ではaction-compiler-v 2 は サーバープロセスで常に起動して いる。 Rollupのキャッシュ機構 (this.cache)はrollup関数実 行 中 でしか有効ではないので、独 自 に サーバーのメモリに保持すること で 高 速化を実現している 配信向けの action-compiler-v 2 では ASTをキャシュをして ビルドを10% 高 速化している © PLAID, Inc.ɹ|ɹConfidential 27 

© PLAID, Inc.ɹ|ɹConfidential プレビュー 高 速化詳細はブログ記事で！ 今回のセッションでは全て 説明しきれないので、 詳細部分はブログを参考に してください！ © PLAID, Inc.ɹ|ɹConfidential 28 https://tech.plaid.co.jp/rollup-perf 

© PLAID, Inc.ɹ|ɹConfidential 本 日 のアジェンダ 1 . はじめに 2 . エレメントビルダーについて 3 . Rollupを使ったプレビュー表 示 改善 4 . RollupからRolldownへの移 行 5 . バンドラとASTを使ったプロダクト 開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 29 

© PLAID, Inc.ɹ|ɹConfidential RollupからRolldownへのマイグレーション © PLAID, Inc.ɹ|ɹConfidential 30 1 . Monorepoの各パッケージのビルド速度向上に伴うDXを 高 める • ローカル開発環境でのビルド速度の向上 • CI / CD 時間の削減 2 . ついでに不必要な node_modules の dependencies を減らす • 現状ビルド必須なライブラリ的なパッケージが unbuild や Vite といった複数ビルドツールを使っている状態なのでRolldownに 一 本化する 3 . エディタを使 用 するエンドユーザーに提供するUX • エディタでアクション保存時にサーバーサイドでの配信ビルド時間を短縮する (現状 7〜10秒待たされる) エレメントビルダーはRollupを酷使したWebフロントエンド技術で動 作しているプロジェクトなので以下の 目 的でRolldown化を進めている 

© PLAID, Inc.ɹ|ɹConfidential Rolldownとは • Vue & Vite の作者Evan You 氏 がプロジェクトリーダーとして進める VoidZero社のOSSプロジェクト • 基盤はVoidZero社のOSSで進めている次世代JavaScriptツールチェイン Oxcを使って構築 • 2025/4/9 現在 v 1 . 0 . 0 -beta. 7 • 開発ロードマップ進捗 ( 5 / 6 milestone) • Rolldown のコア実装 自 体はほとんど完了しており、エッジケースなど が残っているのみ • 現在 Vite が Rolldown をインテグレーションしているフェーズ Rollupと互換APIを持った Rustで再実装された 高 速なバンドラ © PLAID, Inc.ɹ|ɹConfidential 31 

© PLAID, Inc.ɹ|ɹConfidential 移 行 戦略 © PLAID, Inc.ɹ|ɹConfidential 32 具体的な流れとしては以下のとおり 　 1 . エレメントビルダーの各パッケージに rolldown.config でビルドできる状態にする 2 . 各package.jsonのnpm scriptsにRolldown専 用 ビルドタスクを定義する 3 . monorepoのrootなタスクとして全てのパッケージをビルドできるタスクを定義する 4 . Rolldown版のビルドタスクでビルドしてアプリケーションをテストする 5 . 問題なければ、Rollup周りのビルド専 用 タスク、package.jsonから依存を取り除く いきなりRollupをリプレースする形で進めるのではなく、既存のRollupと Rolldown、両 方 ビルドできる状態にしてからスイッチできる形で進める 

© PLAID, Inc.ɹ|ɹConfidential 現時点でRolldownに移 行 するにあたり注意するポイント © PLAID, Inc.ɹ|ɹConfidential 33 TypeScript の d.ts を 生 成する以下のRollupプラグインが動かない • @rollup/plugin-typescript • rollup-plugin-dts (現在メンテナンスモード) • rollup-plugin-ts (現在使 用非 推奨モード) エレメントビルダーのケースでは、現時点で 大 きなトラブルに遭遇して はいないが、移 行 する進めるにあたり以下の点の注意が必要 

© PLAID, Inc.ɹ|ɹConfidential 現時点でRolldownに移 行 するにあたり注意するポイント © PLAID, Inc.ɹ|ɹConfidential 34 • TypeScript の型 生 成(.d.ts)が必須な場合は、以下のように代替が必要 • unplugin-isolated-decl プラグインを使う (https://github.com/unplugin/unplugin-isolated-decl) • oxc-transrom を使って 自 前で対応する • rolldown-plugin-dts を使う (https://github.com/sxzz/rolldown-plugin-dts) • 代替 方 法は、TypeScript の isolatedDeclarations 機構を利 用 しているので、パッケージでexportし ているコードには厳密な型定義が必要になる • なお、Rolldown が型 生 成周りも将来サポートする予定がある https://github.com/rolldown/rolldown/issues/ 1 3 9 6 なので、TypeScriptの型 生 成必須な場合は、以下のような代替が必要 

© PLAID, Inc.ɹ|ɹConfidential エレメントビルダーで 見 送ったRolldownに関する部分 • エレメントビルダーではRollup 自 体もバンドルし てエディタのプレビューを実現している • Rolldownはwasmバイナリも提供しており、それ を使うとブラウザでもバンドルすることができる • ただ、v 1 . 0 . 0 -beta. 7 時点で12.5MBもあり、ロー ドパフォーマンスが現時点より悪くなる懸念 • また、Rolldown の wasmバイナリの配布 & 使 用 方 法が現在発展途上 https://github.com/rolldown/rolldown/pull/ 3 9 2 5 Rolldownをブラウザ向けに バンドルすることは 見 送った © PLAID, Inc.ɹ|ɹConfidential 35 

© PLAID, Inc.ɹ|ɹConfidential 本 日 のアジェンダ 1 . はじめに 2 . エレメントビルダーについて 3 . Rollupを使ったプレビュー表 示 改善 4 . RollupからRolldownへの移 行 5 . バンドラとASTを使ったプロダクト 開発の難しさ © PLAID, Inc.ɹ|ɹConfidential 36 

© PLAID, Inc.ɹ|ɹConfidential エレメントビルダーのドメイン特性 • ソフトウェア開発知識がないマーケッターの 方 で もエディタを使った UI だけでアクションの作成 • かつ、アクションをちょっとしたカスタマイズを コードで編集できるようにする必要がある • これら両 方 をサポートするためには、コード & AST をベースにしたアーキテクチャで設計 ・ 実装 し、エディタ UIとコードを同期させて 一 貫性を保 つ必要がある エレメントビルダーは ノーコードでありながら ローコードなツールでもある © PLAID, Inc.ɹ|ɹConfidential 37 (注意: コード編集している画 面 は開発中のものです) 

© PLAID, Inc.ɹ|ɹConfidential バンドラを使った開発プロダクトの難しさ © PLAID, Inc.ɹ|ɹConfidential 38 • エレメントビルダーのエディタのプレビューを実現するために、Rollup 自 体をさらにバンドルする必 要がある (RollupをRollupでバンドルする) • 事前バンドルで多段バンドルになってさらに混乱しやすくなった action-compiler-v 2 は2段バンドル → preview モジュールで action-compiler-v 2 をバンドル • またのエレメントビルダーのビルド要件として、以下2つの実 行 環境を考慮する必要ある • プレビュー向け: エディタ編集のUXを損なわないようアクションのビルド速度最優先 • 配信向け: 配信先のWebサイトのパフォーマンス(つまりCore Vitals)が落ちないようアクションの実 行 速度優先 バンドラが時々どのコンテキストで動作するものか混乱するときがある 

© PLAID, Inc.ɹ|ɹConfidential ASTを使った開発プロダクトの難しさ • エレメントビルダーのアクションはこれまで の開発経緯からSvelte v 3 で実装されている • 現在 Svelte v 5 が最新のバージョンではある が、Svelte v 4 (v 3 )と互換性がない • 幸い、Svelte v 5 は v 4 (v 3 ) と互換を持った AST を 生 成するコンパイラオプションがあるの で、v 5 へのアップグレードはそれで対応して いる ASTのインターフェイス互換性 を考慮して開発する必要がある © PLAID, Inc.ɹ|ɹConfidential 39 Svelte v 3 AST Svelte v 5 AST 

© PLAID, Inc.ɹ|ɹConfidential ASTを使った開発プロダクトの難しさ • JavaScript ツールチェインが 生 成する AST はオブジェクトであるため、アプリケーショ ン側から気軽にコネコネされてしまい、AST のI/Fが変わってしまったときマイグレーショ ンが 大 変 • Svelte 以外のフレームワーク対応がビジネス 要件的に必要になった場合も、AST を抽象化 しないと対応できない… ASTを直接操作させないよう な抽象化レイヤーの必要性 © PLAID, Inc.ɹ|ɹConfidential 40 🙅 

© PLAID, Inc.ɹ|ɹConfidential ASTを使った開発プロダクトの難しさ • アプリケーション側ではそれによって 提供されるI/FによってエディタUIを実 現 • ASTのI/Fの差異は、抽象化レイヤー側 で吸収することができる • また、抽象化レイヤー側でASTをさら に抽象化することで拡張性が得られる 抽象化レイヤーを設けると曖昧だっ た債務が明確になり、アプリケー ションの保守性と拡張性が広がる © PLAID, Inc.ɹ|ɹConfidential 41 

© PLAID, Inc.ɹ|ɹConfidential ASTを使った開発プロダクトの難しさ • IRアーキテクチャを導 入 し、 ASTも抽象化し、AST変換に よって異なるフレームワークも サポート可能になる 拡張性の例: IR(中間表現)アーキテクチャ © PLAID, Inc.ɹ|ɹConfidential 42 IR アーキテクチャによる拡張性の例 

© PLAID, Inc.ɹ|ɹConfidential まとめ © PLAID, Inc.ɹ|ɹConfidential 43 

© PLAID, Inc.ɹ|ɹConfidential まとめ 今 日 のセッションでは 以下について話した © PLAID, Inc.ɹ|ɹConfidential 44 • Rollupを使ったプロダクトにおけるパフォーマンス チューニングの話 • 2024年末にv 1 ベータ版がリリースされたRolldown 導 入 取り組みの話 • バンドラ & AST を使ったプロダクト開発の難しさ • 事前バンドルを利 用 して静的なJavaScriptモジュー ルをバンドルプロセスから除外するとビルドパ フォーマンスが向上する • 現時点でRolldownはほぼRollupと互換性持ってお り、基本的なバンドルユースケースでは特に問題が なく、Rollupからシームレスに移 行 できる • 特殊な技術要素を使った場合でもその技術特有の難 しさはあるが、尖った技術を使ったプロダクト開 発、そして新しい技術誕 生 に発展する楽しさがある 

© PLAID, Inc.ɹ|ɹConfidential まとめ 今 日 のセッションでは 以下について話した © PLAID, Inc.ɹ|ɹConfidential 45 • Rollupを使ったプロダクトにおけるパフォーマンス チューニングの話 • 2024年末にv 1 ベータ版がリリースされたRolldown 導 入 取り組みの話 • バンドラ & AST を使ったプロダクト開発の難しさ • 事前バンドルを利 用 して静的なJavaScriptモジュー ルをバンドルプロセスから除外するとビルドパ フォーマンスが向上する • 現時点でRolldownはほぼRollupと互換性持ってお り、基本的なバンドルユースケースでは特に問題が なく、Rollupからシームレスに移 行 できる • 特殊な技術要素を使った場合でもその技術特有の難 しさはあるが、尖った技術を使ったプロダクト開 発、そして新しい技術誕 生 に発展する楽しさがある 

© PLAID, Inc.ɹ|ɹConfidential ご清聴ありがとうございました！ © PLAID, Inc.ɹ|ɹConfidential 46 

No content