cmsの主にフロントエンドを担当する堀です。今回はかなりニッチな話をします。cmsのJavaScriptのサイズを削減した話です。cmsでは、Ver.2.8以降、モダンなフロントエンド開発環境にするべく、WebpackやBabel、Reactなどの整備をスタートしました。同時に独自のモジュールシステムでインポートしていたjsを一部、JavaScriptのimport文に切り替えたりしました。Webpackに切り替えたことによってnpmのエコシステムに乗っかり以下のようにフロントエンドの力が試されるリッチな機能を比較的短期間で作れるようになりました。2.8の時は、LiteEditorやナビゲーションモジュール、SmartPhoto、クイックサーチ機能2.9の時にはプレビュー機能、管理メニューのカスタマイズ機能2.10ではメディア機能ただ、2.10の時期になるとnpm、Webpackに頼りすぎたためその歪みもでてきました。269KB)なのに対し、フロントとindex.jsとadmin.jsが共通で使うvendor.chunk.jsも967KB(非圧縮時2.16MB)ありました。そのため、CMSにログインしているユーザーの場合だと、画面が開いた時点でだいたい1MB近くのJavaScriptを読み込むことになってしまっていました。これはパフォーマンス的にも非常によろしくないので、もう少しバンドルサイズを小さくしようという話になりました。JavaScriptのファイルサイズ削減は画像などのファイルサイズ削減よりも重くパフォーマンスに影響します。ファイルサイズを減らすことによってページがロードされてから動作可能になるまでの時間が削減できます。どのように削減したかではどのように削減したか紹介していきます。WebpackBundleAnalyzerというWebpackのプラグインを利用しました。以下のような結果になりました。このようにvendor.chunk.jsが非圧縮時2MBという結果でした。cmsのフロント画面で、組み込みjsを利用する際、または管理者の場合は必ず読み込まれるJavaScriptなので、まずはこのvendor.chunk.jsで使わないであろうモジュールを削ぎ落として減量する作業が必要でした。core-jsの見直しまずはこの部分の対策からスタートしました。cmsはIE11まで対応しているのでこのライブラリの導入がマストでした。core-jsは、モダンブラウザーでは実装されていて、古いブラウザーだと実装されていないJavaScriptの機能をpolyfillするためのJavaScriptです。core-jsでは各機能ごとにpolyfillが提供されています。当初はどのpolyfillが使われるのか予想がつかなかったのでcore-jsのすべての機能を読み込んでいました。それだと必要のないpolyfillまで使われることになるので2.10でみなおしました。具体的には以下のようにbabelの設定をみなおし、ソースコード内で使われていて、ターゲットのブラウザにない機能をpolyfillするようにしました。'usage'とオプションを指定することで自動で使われている機能だけをPolyfillしてくれます。'usage'は@babel/preset-envを7.4以上で利用することができます。その結果、core-jsが実際に必要なモジュール(js)に使用されるようになるので、vendor.chunk.jsからはcore-jsがほとんどなくなりました。これで非圧縮時のバンドルサイズが1.96MBになりました。dynamic-importの積極利用dynamic-importとはJavaScriptを必要なタイミングでJavaScriptから読み込む仕組みです。dynamic-importを積極的に利用することによってBundleされるファイルにはロード時に本当に必要なモジュールしか読み込まれないためBundleサイズの削減が見込めます。cmsの場合は、vendor.chunk.jsに依存モジュールを大量に溜め込んでいたため特に効果がありました。これによりBundleサイズが一気に非圧縮時のバンドルサイズが581KBにまで削減されました。Groupの導入です。どのモジュールでも共通で使われているモジュールをグループ単位で別のモジュールとして吐き出しておく設定ができます。Groupに設定しました。Webpack.config.jsでは以下のように記述しました。385KB)になりました。先ほどの画像と見比べてみると、reactやprop-typesなどのモジュールがなくなっているのが確認できると思います。焦点をあてて記事にしましたが、結果的にvendor.chunk.jsは213KBに、index.jsは58KBに、admin.jsも27KBになり、最初に最低限読み込まなければいけないjsが300KB以内に抑えられるようになりました。1MB超→から300kBということで今回の一連の改善はかなりの効果がありました。cmsのVer.2.10.18から適応されています。新機能を開発するのも大事ですがパフォーマンスなどに目を配ることも大事ですね。Ver.2.10をお使いの皆さんはJavaScriptの改善が見込めますのでぜひバージョンのアップデートをご検討いただけたらと思います。最後までおつきあいいただきありがとうございました。