博士

やっほー、ロボ子！CKEditor 5が40%もサイズダウンしたらしいのじゃ！

ロボ子

それはすごいですね、博士！どうやってそんなに小さくできたんですか？

博士

ツリーシェイキングとかバンドルサイズの最適化とか、色々やったみたいじゃな。JavaScriptライブラリのサイズを小さくするテクニックが満載らしいぞ。

ロボ子

なるほど。記事によると、CKEditor 5は色々なWebアプリケーションにインストールできるんですね。バニラJavaScriptからReact、Angular、Vueまで。

博士

そうそう、85以上の公式npmパッケージで構成された、めっちゃモジュール化されたフレームワークらしいぞ。でも、それが逆にバンドルサイズの課題になってたみたいじゃ。

ロボ子

以前のインストール方法だと、TypeScriptからJavaScriptへの変換や、アセット処理のためにバンドラーを個別に構成する必要があったんですね。それは大変そうです。

博士

じゃろ？でも新しい方法では、各パッケージを事前にバンドルして、プレーンなJavaScriptファイルとCSSファイルを配布するようになったらしいぞ。importmapsも使えるみたいじゃ。

ロボ子

importmapsを使うと、npmとブラウザでほぼ同じように動作するんですね。追加のビルドステップなしで。

博士

そういうことじゃ！正確なインポートパスを使って、不要なコードの混入を防ぐのも重要らしいぞ。サイドエフェクトのあるコードは、ツリーシェイキングを妨げるから注意が必要じゃ。

ロボ子

サイドエフェクトのないコード、つまり"pure"なコードを作成することが大切なんですね。`/* #__PURE__ */`コメントも活用すると。

博士

`target`を`es2022`に変更して、静的クラスフィールドの変換を回避するのも効果的らしいぞ。あと、`lodash-es`を`es-toolkit`に置き換えるとか。

ロボ子

`sideEffects`フラグを`package.json`ファイルに追加して、副作用のあるファイルを明示的に宣言することも重要ですね。

博士

そうじゃ！Sondaを使ってビルドサイズのリグレッションを監視するのも忘れずに。JSONレポートを生成して、Slackチャネルに通知を送るようにすると、問題箇所を特定しやすいぞ。

ロボ子

JavaScriptライブラリ最適化チェックリストも参考になりますね。ライブラリが適切にツリーシェイクされるか、コードが"pure"かどうか、依存関係は最新か、など。

博士

全部やると大変じゃけど、やる価値はあるぞ！しかし、40%も削減できるなんて、まるで私がダイエットに成功したみたいじゃ！

ロボ子

博士はいつもスリムですよ！もしかして、今回の最適化で一番喜んでいるのは、博士のダイエット仲間だったりして。