これから先も戦えるサードパーティスクリプト

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 1 これから先も戦えるサードパーティスクリプト —
1/10に軽量化・柔軟な拡張性・互換性の担保 — 株式会社プレイド西村優汰

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 2 本日の内容本日の内容 •
2015 年リリース以来初となる計測タグも含めたサードパーティスクリプトの全刷新 • どんなところが課題だったのか • 課題に対して、この先戦っていくためにどう解決したのか

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　本日のテーマ計測タグとは移行のきっかけサイズ軽量化
プラグイン化計測タグの拡張性まとめ話すこと 󰗔 これから先も戦えるサードパーティスクリプト

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 KARTEについて一人一人に合わせた顧客体験を提供 Webサイトの訪問者の行動を
顧客ごとにリアルタイムに解析 CX(顧客体験)プラットフォーム

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 5 計測タグとは Website <script
src=”...”></script> (計測タグ) JavaScript 実行解析サーバー { "event_name": "view", "keys": { "api_key": "xxxxxx", "user_id": "user_B", }, "page": "https://plaid.co.jp/", ... } JavaScript (3rd Party Script)

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 6 計測タグとは Website <script
src=”...”></script> (計測タグ) JavaScript 実行解析サーバー { "event_name": "view", "keys": { "api_key": "xxxxxx", "user_id": "user_B", }, "page": "https://plaid.co.jp/", ... } 今回話す対象 JavaScript (3rd Party Script)

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 7 計測タグとは計測タグの主な責務 •
3rd Party Script を呼び出し、実行する 3rd Party Script の主な責務 • エンドユーザーの状態に応じた event data をサーバーに送信する • サーバーから返却された action (例えばポップアップなど) の描画

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 9 移行のきっかけ旧計測タグと 3rd
Party Script の構成 JavaScript (全プロジェクト共通) Website (Project A) CDN Website (Project B) Website (Project C)

Party Script の課題 ① • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)

Party Script の課題 ② • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)

Party Script の課題 ③ • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 13 移行のきっかけ新計測タグと 3rd
Party Script で目指したこと • スクリプトサイズの軽量化 • プロダクトのプラグイン化 • 計測タグ自体の拡張性 • 3rd Party Script サイズの肥大化 ◦ 一部の Project にしか必要のない機能が存在 ◦ ブラウザの進化などにより不必要なコードの増加 ◦ サイトパフォーマンスの重要性 (Core Web Vitals ) • 3rd Party Script 上で動く KARTE プロダクトの増加 ◦ 当初、プロダクトは1つのみ ◦ Plugin として動かす仕組みがない • 計測タグ自体の拡張性の制限 ◦ 新規機能の開発に制限あり (後述)

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 15 スクリプトサイズ軽量化どれくらいスクリプトサイズを軽量化したのか
307 kb 25 kb 新 3rd Party Script (最小設定かつgzip圧縮前) 旧 3rd Party Script (gzip圧縮前) 軽量化により「ダウンロード時間の改善」「CPU時間の改善」

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 16 スクリプトサイズ軽量化軽量化するために行ったこと
• Project ごとに JavaScript を作成 ◦ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように (後ほど詳しく説明) • Treeshaking や Dead Code Elimination を意識した開発 ◦ 詳しくは弊社社員の別発表資料にて「バンドル最適化マニアクス at tsconf 」 (https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf) • Internet Explorer 対応をしない決定をした

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 17 スクリプトサイズ軽量化軽量化するために行ったこと
• Project ごとに JavaScript を作成 ◦ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように (後ほど詳しく説明) • Treeshaking や Dead Code Elimination を意識した開発 ◦ 詳しくは弊社社員の別発表資料にて「バンドル最適化マニアクス at tsconf 」 (https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf) • Internet Explorer 対応をしない決定をした

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 18 スクリプトサイズ軽量化新計測タグと
3rd Party Script の構成 JavaScript (Project A) Website (Project A) CDN Website (Project B) Website (Project C) JavaScript (Project B) JavaScript (Project C) Website (Project A) CDN Website (Project B) Website (Project C) JavaScript (全 Project 共通)

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 19 スクリプトサイズ軽量化 Project
ごとの bundle の仕組み JavaScript (Project A) Website (Project A) CDN Website (Project B) Website (Project C) JavaScript (Project B) JavaScript (Project C) JavaScrip t (共通) JSON Config (Project A) JSON Config (Project B) JSON Config (Project C) bundle bundle bundle Server

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 20 スクリプトサイズ軽量化どのように機能を取捨選択しているか
rollup などで bundle terser で最適化以下の 2つのコードを想定 • entry.js • features.js

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 21 スクリプトサイズ軽量化 ProjectごとにJavaScriptを用意するデメリット
JavaScript 本体の更新時に全 Project の数だけJavaScript を生成し直す必要 1. デプロイ時間が長くなる → bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中) → bundle をせず、Project ごとの conﬁg をそのまま文字列置換 (Projectごとの最適化はできない) 【bundle speed (50ﬁle)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec 2. CDN の Invalidation の制限がある → CDN の cache 時間を 1 min と短めに設定

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 22 スクリプトサイズ軽量化 ProjectごとにJavaScriptを用意するデメリット
JavaScript 本体の更新時に全 Project の数だけJavaScript を生成し直す必要 1. デプロイ時間が長くなる → bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中) → bundle をせず、Project ごとの conﬁg をそのまま文字列置換 (Projectごとの最適化はできない) 【bundle speed (50ﬁle)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec 2. CDN の Invalidation の制限がある → CDN の cache 時間を 1 min と短めに設定

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 24 他プロダクトのプラグイン化会社のフェーズの変化
リリース当初 (2015年) 3rd Party Script プロダクト A ポップアップ現在様々なプロダクトを 3rd Party Script 上で動かす統一的な仕組みがなかった 3rd Party Script プロダクト A ポップアッププロダクト C チャットプロダクト B FAQ

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 25 他プロダクトのプラグイン化プラグイン化の要件
• Project によって必要なプロダクトが違う • 3rd Party Script 本体とは別で開発される • 3rd Party Script 本体から情報を渡す必要 • プラグイン間のデータのやり取り ◦ プラグインが起動している保証なし

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 26 他プロダクトのプラグイン化プラグイン化の実装
• Project によって必要なプロダクトが違う → Project ごとに JavaScript を生成 (前述なので省略) • 3rd Party Script 本体とは別で開発される • 3rd Party Script 本体から情報を渡す必要 • プラグイン間のデータのやり取り ◦ プラグインが起動している保証なしシンプルに！ • dynamic import のみで解決 • シンプルな interface 規約 Pub/Subの仕組み

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 28 他プロダクトのプラグイン化プラグイン間のデータのやり取り
• Pub/Sub の仕組みを採用 • Plugin は様々な Topic の Publisher, Subscriber を担う • Plugin 起動前の message も受け取ることが可能 Topic A [msgA, msgC] Plugin A Plugin B Plugin C Publish “msgA” Publish “msgC” Subscribe TopicA [msgA, msgB]

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 30 計測タグの拡張性旧計測タグの拡張性の課題旧計測タグのイベントトラッキング関数
• 旧計測タグの場合、 tracker object に track method を事前に宣言する必要あり • track 以外の method を新しく使おうとすると、事前宣言用の script を書き換える必要あり → method 足すたびにお客様によるスクリプトタグの置き換えが必要新しい method を容易に開発できない事前宣言用の疑似スクリプト delete の method を足そうとすると

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 31 計測タグの拡張性計測タグ自体の拡張性の改善新計測タグのイベントトラッキング関数
• tracker object に function を生やす (第一引数が method 名) • method 名の定義は 3rd Party Script 内部で定義お客様のタグ変更なく容易にmethod を追加可能事前宣言用の疑似スクリプト

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 32 計測タグの拡張性計測タグ変更によるデメリット •
計測タグ移行時に全てのイベントトラッキング関数を置き換える必要 ◦ 関数の数としては多く負担になる互換用のスクリプトタグを作成旧計測タグのインターフェースを新計測タグの上に実装

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 34 まとめまとめ •
以下の点を主に考えながら、計測タグと3rd Party Scriptを全刷新 ◦ スクリプトサイズの軽量化 ▪ Project ごとに使う機能だけ bundle ◦ 他プロダクトのプラグイン化 ▪ シンプルに！　データのやり取りは Pub/Sub で ◦ 計測タグ自体の拡張性 ▪ method 名の定義を事前宣言 script 内でしない • これからの課題 ◦ Project ごとの JavaScript の bundle 速度の向上 ◦ スクリプトサイズを小さく保っていく仕組みや文化 ◦ 3rd Party Script 上にのる Product をガンガン開発

これから先も戦えるサードパーティスクリプト

これから先も戦えるサードパーティスクリプト

More Decks by nichimu

Other Decks in Technology

Featured

Transcript