2つのビルドをいかに両立させたか
これまでブラウザでの実行速度高速化（ユーザー体験の最適化）と、エディタでの編集速度高速化（編集体験の最適化）のための工夫を述べてきた。ここからは、これら2つのビルドを両立するためのアーキテクチャを解説する。
ビルドが2つあることで、実行時とプレビュー時で挙動に違いがでてしまう課題が生まれていた。内部で生成されるJavaScriptのコードは違っていてもよいが、挙動が違うのでは困る。プレビューではビルドできるものの、実行のためのビルドではエラーになることもあった。
ずれが生じる原因はパッケージバージョンのずれや、Svelteの影響である。対策として、まずビルド処理を単一のパッケージにまとめた。処理が同じで設定だけ違うインターフェースをそれぞれ用意して、2つのビルドで同じ処理を通すようにする。これでライブラリバージョンや環境差分を抑えられる状態となった。
さらに、同一のソースコードから複数の実行コードを生成しないといけないが、同じコードを使うとインポート先が固定になってしまう。実行時には実行時のSDK、プレビュー時にはプレビューSDKを使用し、それぞれ別のSDKを利用したい。そこでplugin-aliasを活用し、ビルドプロセスにより読み込むパッケージやSDKを切り替える。これにより開発用のSDKの切り替えも可能となった。
まとめると、実行速度を優先する実行用のビルドではtree-shakingとSvelteを活用し、ビルド時間を優先するプレビューのビルドでは全更新ではなく差分更新することと不要な処理を省くようにする。そして2つのビルドで不整合が生じないようにするため、ビルドパッケージを共通化し、SDKを切り替えられるようにした。このような工夫により、KARTEではユーザーと編集者双方の体験を最適化する。
片居木氏は最後に、「データを使って、より良い顧客体験を提供することが我々のミッション。より良い顧客体験のためのフロントエンドを作ることを重視している」とセッションを締めくくった。
