サーバーサイドのビルド時間87倍高速化

本スライドはRollupからRolldownに移行することによってビルド時間を劇的に改善し、UX、DXを改善した話です。

Transcript

1. © PLAID, Inc. サーバーサイドのビルド時間 87倍 高 速化 © PLAID, Inc. 株式会社プレイド 川 口 和也 2025-08-25 フロントエンドカンファレンス東京 x Vue Fes Japan コラボイベント
2. © PLAID, Inc. 自己 紹介 川 口 和也 (kazupon) Kazuya Kawaguchi GitHub : @kazupon X : @kazu_pon BlueSky: @kazupon • 株式会社プレイド • Engineer • Developer Experimence チーム © PLAID, Inc. 2
3. © PLAID, Inc. KARTEについて © PLAID, Inc. 3 CX(顧客体験)プラットフォーム 一人 ひとりに合わせた 顧客体験を提供 WebやAppの訪問者の 行 動を 顧客ごとにリアルタイムに解析
4. © PLAID, Inc. プレイドの全体戦略 “マルチチャネル × 1st Party Customer Data × リアルタイム” をワンストップで提供 するプラットフォーム © PLAID, Inc. 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
5. © PLAID, Inc. 本 日 のアジェンダ 1 . はじめに 2 . フレックスエディタについて 3 . UXへ悪影響を与える 長 いビルド時間 4 . RollupからRolldownへの移 行 5 . ビルドパフォーマンスの改善 © PLAID, Inc. 5
6. © PLAID, Inc. 本 日 のアジェンダ 1 . はじめに 2 . フレックスエディタについて 3 . UXへ悪影響を与える 長 いビルド時間 4 . RollupからRolldownへの移 行 5 . ビルドパフォーマンスの改善 © PLAID, Inc. 6
7. © PLAID, Inc. © PLAID, Inc. 7 https://voidzero.dev/posts/customers-plaid
8. © PLAID, Inc. はじめに • プロダクトで使っているRollupを Rolldownへの移 行 によって ビルドパフォーマンスを改善した話 本 日 話すこと © PLAID, Inc. 8
9. © PLAID, Inc. 本 日 のアジェンダ 1 . はじめに 2 . フレックスエディタについて 3 . UXへ悪影響を与える 長 いビルド時間 4 . RollupからRolldownへの移 行 5 . ビルドパフォーマンスの改善 © PLAID, Inc. 9
10. © PLAID, Inc. フレックスエディタ コーディングスキル不要でア クション(施策)のフルカスタ マイズが可能なエディタ。 エディタUI と豊富なエレメ ント(コンポーネント)で、ア クションを編集できる ノーコードで アクションを 編集できるエディタ © PLAID, Inc. 10
11. © PLAID, Inc. 本 日 のアジェンダ 1 . はじめに 2 . フレックスエディタについて 3 . UXへ悪影響を与える 長 いビルド時間 4 . RollupからRolldownへの移 行 5 . ビルドパフォーマンスの改善 © PLAID, Inc. 11
12. © PLAID, Inc. 異なる環境でのパフォーマンス要件 © PLAID, Inc. 12 • クライアントサイド(ブラウザ)側 エディタの編集したアクションをプレビュー(iframe)として表 示 させるケース 要件: プレビュー表 示 速度パフォーマンスを優先 • サーバーサイド側 エディタによるアクション編集内容をサーバー側で保存するケース 要件: Webサイトに配信させるJSのロードパフォーマンスを優先 フレックスエディタは裏側(コア)ではRollupを使ったプロダクト。 2つの異なる環境の要件にRollupを最適化させてビルドしている
13. © PLAID, Inc. クライアントサイドの最適化 © PLAID, Inc. 13 • 最適化 • tree-shaking 無効 • minify (コード圧縮) の無効化 • 事前バンドルテクニック • … など • ビルド平均時間: 460ms 詳細は公開されているスライドで 参考にしてください クライアントサイドでは Rollupに対する最適化を施してプレビュー表 示 速度 を Core Web Vitals の指標数値200msに近づけ、ストレスのない UX を維持 https://speakerdeck.com/plaidtech/rollup-perf-and-bundler-ast
14. © PLAID, Inc. サーバーサイドの最適化 © PLAID, Inc. 14 • minify によるコード圧縮 • tree-shakingによる使っていないコードの削減 (DCE) サーバーサイドではJSのロードパフォーマンスを 高 めるためにRollup に対して以下の最適化を施す
15. © PLAID, Inc. サーバーサイドのビルドパフォーマンス状況 © PLAID, Inc. 15 しかしながら、ビルド時間 平均5〜10秒、時には20秒超えていた ASTキャッシュを試みたが10%程度の改善であまり効果なし グラフ: プロダクション環境のDatadogによるビルド時間
16. © PLAID, Inc. 悪影響を与えるサーバーサイドのビルドパフォーマンス Core Web Vitals の インタラク ション UI遅延指標 INP 2 0 0 ms 以下になっていない... 明らかに UX を損なう サーバー側もrequestが詰まる... サーバーサイドのビル ド時間が遅いと必然 とresponseが遅い... © PLAID, Inc. 16 ビルドが完了するまで 待たなくてはいけない...
17. © PLAID, Inc. シングルスレッド & イベント駆動なJavaScriptには CPU ヘビーな処理は苦 手 RollupのようなバンドラはCPU コストが 高 い処理をする © PLAID, Inc. 17 Rollupバンドルプロセス: 公式ドキュメントの図より https://rollupjs.org/plugin-development/ • バンドラがする処理内容 • JavaScript / TypeScript コードの parse 処理 • Transform 処理 • Parse 処理されたコードの AST 変換 • Module Graph (tree) の構築 • Tree-shaking • Code spliting • Module Graph からのコード 生 成 • minify (特にCPUヘビー) Module graph
18. © PLAID, Inc. 本 日 のアジェンダ 1 . はじめに 2 . フレックスエディタについて 3 . UXへ悪影響を与える 長 いビルド時間 4 . RollupからRolldownへの移 行 5 . ビルドパフォーマンスの改善 © PLAID, Inc. 18
19. © PLAID, Inc. サーバーサイドのビルド時間が遅い問題の解決策 Rolldownに移 行 することで、 サーバーサイドのビルド時間 問題を解決することにした © PLAID, Inc. 19
20. © PLAID, Inc. Rolldownとは • Vue & Vite の作者Evan You 氏 がプロジェクトリーダーとして進める VoidZero社のOSSプロジェクト • 基盤はVoidZero社のOSSで進めている次世代JavaScriptツールチェイン Oxcを使って構築 • 2025/8/25 現在 v 1 . 0 . 0 -beta. 3 4 • 開発ロードマップ進捗 ( 5 / 6 milestone) • Rolldown のコア実装 自 体はほとんど完了しており、エッジケースなど が残っているのみ • 現在 Vite が Rolldown をインテグレーションしているフェーズ Rollupと互換APIを持った Rustで再実装された 高 速なバンドラ © PLAID, Inc. 20
21. © PLAID, Inc. Rolldown を選定した理由 © PLAID, Inc. 21 • フレックスエディタのプロジェクトでは、内部 ライブラリパッケージのビルドにもRollupを 使っており、Rolldownに置き換えてパッケージ ビルド速度を10秒〜1分から100ms〜 7 秒まで 大 幅に短縮した • 筆者 OSS プロジェクトで Rollup から Rolldown に移 行 することでビルド速度を291倍の 高 速化 検証した結果、Rollupと互換APIを持ち、ビルド時間がRollupより 非 常 に 高 速で、ビルドされたモジュールが正しく動作することを確認 https://github.com/intlify/vue-i 1 8 n/actions/runs/ 1 2 6 4 4 5 1 9 4 5 0
22. © PLAID, Inc. サーバーサイドのRollupからRolldownへの移 行 方 法 © PLAID, Inc. 22 RollupとのAPI互換性という特性を活かして、import 構 文 の変換ロ ジック(Rolldownプラグイン)だけで済むようにした Before After プラグイン
23. © PLAID, Inc. サーバーサイドのRollupからRolldownへの移 行 方 法 © PLAID, Inc. 23 フレックエディタはRollupを使った専 用 コンパイラによって実現されて おり、バンドルしている (RollupをRollupでバンドルする!?) 愚直に Rolldown 向け固有ロジックでコンパイラ実装すると、そのメンテナンスが発 生 するためそれを避けたかった
24. © PLAID, Inc. サーバーサイドのRollupからRolldownへの移 行 方 法 © PLAID, Inc. 24 • ケース: minify oxc-minify が Rolldownに組み込みれて いるため@rollup/plugin-terserプラグイ ンではなく、config でoutput.minifyで設 定する RolldownはRollupにはない固有の設定やオプションがある場合は、条 件分岐させずそのまま設定するようにしている
25. © PLAID, Inc. 本 日 のアジェンダ 1 . はじめに 2 . フレックスエディタについて 3 . UXへ悪影響を与える 長 いビルド時間 4 . RollupからRolldownへの移 行 5 . ビルドパフォーマンスの改善 © PLAID, Inc. 25
26. © PLAID, Inc. サーバーサイドのビルドパフォーマンスの測定パターン © PLAID, Inc. 26 1 . Rollup (minify なし) 2 . Rolldown (minify なし) 3 . Rollup + Terser (@rollup/plugin-terser) 4 . Rolldown + SWC (rollup-plugin-swc 3 ) 5 . Rolldown + 組み込みminify (oxc-minify) パフォーマンス改善具合を確認するため、Rollup/Rolldownとの 比 較だ けでなく、minifyの有無、minifyプラグインの種別による 比 較も 行 う https://github.com/intlify/vue-i 1 8 n/actions/runs/ 1 2 6 4 4 5 1 9 4 5 0
27. © PLAID, Inc. サーバーサイドのビルドパフォーマンスの測定環境 マシンスペック © PLAID, Inc. 27 • index.tsx • App.svelte • gen.ts • customScript.ts • karte-template.json • props.json • variablesQuery.json • localVariablesQuery.json 施策(アクション)コード構成 • モデル: MacBook Pro 1 4 -inch, 2 0 2 1 • チップセット: Apple M 1 Max • メモリ: 64GB
28. © PLAID, Inc. サーバーサイドのビルド速度パフォーマンス測定結果 © PLAID, Inc. 28 測定内容 ビルド最遅時間 ビルド最速時間 ビルド平均時間 Rollup (minifyなし) 5 6 1 ms 2 0 5 ms 2 3 6 ms Rolldown (minifyなし) 1 1 3 ms 2 3 ms 3 3 ms Rollup + Terser 2 4 2 4 ms 9 5 9 ms 1 1 5 0 ms Rolldown + SWC 2 3 5 ms 1 0 7 ms 1 2 5 ms Rolldown + 組み込み minify 1 4 4 ms 2 8 ms 4 0 ms • Rolldownの最速時間とRollupの最遅時間との 比 較: 約24倍、平均約9倍 • Rolldown+組み込みminifyの最速時間とRollup+Terserの最遅時間との 比 較: 約87倍、平均約29倍
29. © PLAID, Inc. サーバーサイドのバンドルファイルサイズの測定 © PLAID, Inc. 29 測定内容 Minifyファイルサイズ Gzipファイルサイズ Rollup + Terser 9 2 . 1 5 KB 3 1 . 3 8 KB Rolldown + SWC 1 1 4 . 7 3 KB 3 9 . 1 1 KB Rolldown + 組み込みminify 1 2 2 . 0 9 KB 4 0 . 3 5 KB • Rolldown+組み込みminifyは、Rollup+Terserと 比 較して約20 ～ 25%バンドルサイ ズが 大 きくなった • 大 きくなってしまっている原因は、Rolldown組み込みminifyであるoxc-minifyの最 適化が現時点で完全に対応していないため (Terserすごい！) https://github.com/vitejs/rolldown-vite/issues/ 1 5 5 #issuecomment- 2 8 5 6 9 9 8 5 6 4
30. © PLAID, Inc. 最終的にサーバサイドのビルドにRolldown採 用 した理由 © PLAID, Inc. 30 サーバサイドでのRolldownにすると現 行 のRollupベースのビルドより 20~25%ファイルサイズが 大 きくなってしまうが今回はトレードオフとして採 用 • フレックエディタのアーキテクチャの初期設計の段階で、すでにアクションは 1/10 に削減 済み • Rolldownによるビルド 高 速化に伴うファイルサイズ増加による影響よりも、UX / DX の改 善することによるビジネス価値できるインパクトが 大 きい
31. © PLAID, Inc. プロダクションビルドパフォーマンス © PLAID, Inc. 31 5〜10秒かかっていたビルド時間を数百ms単位のビルド時間に改善。 エディタのUXを改善し、 見 積していたサーバーコストの削減 グラフ: Rolldown移 行 後のプロダクション環境のDatadogによるビルド時間
32. © PLAID, Inc. この発表の詳細はブログ記事で！ 今回のセッションでは詳細 説明しきれないので、 ブログを参考にしてくださ い！ © PLAID, Inc. 32 https://tech.plaid.co.jp/perf-server-build
33. © PLAID, Inc. まとめ © PLAID, Inc. 33
34. © PLAID, Inc. まとめ 今 日 のセッションでは 以下について話した © PLAID, Inc. 34 • 課題: フレックエディタのサーバサイドのビルド時間 が 長 いためエディタのUXを損なっていた • 解決策: Rolldownに移 行 することでビルドパフォー マンスの改善 • 結果: Rolldownに移 行 することによって、プロダク ション環境でのビルド時間を 大 幅に改善 • 施策をフレックエディタで保存すると、Rollupの最 適化そしてJavaScriptのアーキテクチャの限界によ り、5-10秒（最 大 20秒超）待たされていた。 • パフォーマンス測定結果、最 大 87倍、平均29倍とい うビルド 高 速化を実現。minify最適化がまだ完全で はないが、トレードオフとしてUX/DXを優先。 • 実際プロダクション環境に投 入 した結果、数百msま でビルドを 高 速化することができた。
35. © PLAID, Inc. まとめ 今 日 のセッションでは 以下について話した © PLAID, Inc. 35 • 課題: フレックエディタのサーバサイドのビルド時間 が 長 いためエディタのUXを損なっていた • 解決策: Rolldownに移 行 することでビルドパフォー マンスの改善 • 結果: Rolldownに移 行 することによって、プロダク ション環境でのビルド時間を 大 幅に改善 • 施策をフレックエディタで保存すると、Rollupの最 適化そしてJavaScriptのアーキテクチャの限界によ り、5-10秒（最 大 20秒超）待たされていた • パフォーマンス測定結果、最 大 87倍、平均29倍とい うビルド 高 速化を実現。minify最適化がまだ完全で はないが、トレードオフとしてUX/DXを優先 • 実際プロダクション環境に投 入 した結果、数百msま でビルド 高 速化できた
36. © PLAID, Inc. ご清聴ありがとうございました！ © PLAID, Inc. 36