バンドルファイルのサイズを 50%軽量化した話 みんなのマーケット株式会社 フロントエンドエンジニア / きたがわ 1

目次 2 1. はじめに
 2. 現状分析
 3. 軽量化のアプローチ - その1（未使用ライブラリの削除） 
 4. 軽量化のアプローチ - その2（TreeShakingの有効化） 
 5. 軽量化のアプローチ - その3（バンドルファイルの分割） 
 6. 最終結果
 7. 今後の取り組み
 8. 会社紹介


はじめに
 くらしのマーケットでは、インタラクティブな画面を実現するためにAngularを採用しています。 
 しかし、画面や機能の増加に伴いバンドルファイルが肥大化している課題がありました。 
 実際、ウェブサイトを定量的に評価するPageSpeed Insightsではバンドルファイルが大きすぎると指摘を受 けていました。
 
 
 
 
 
 
 
 バンドルファイルのサイズを改善することでサイトの読み込み速度が向上し 
 結果的にユーザ体験やSEOによい影響をもたらすことができるため改善に取り組みました。 
 
 3

現状分析
 まずは現状をより詳細に知るため、各バンドルファイルの情報を可視化しました。 
 くらしのマーケットでは、バンドラーとしてWebpackを採用しているため 
 以下のプラグインを使用しました。 
 
 ● webpack-bundle-analyzer 
 
 このプラグインでは以下の情報を取得できます。 
 
 ● 各バンドルファイルのサイズ（minify前後, 圧縮後）
 ● サードパーティライブラリのサイズ
 ● 不要なAngularモジュールやライブラリ
 ● バンドル構成
 
 4 （webpack-bundle-analyzerが生成したバンドル構成図）

現状分析
 可視化された情報をもとに以下のことが分かりました。 
 
 
 ● 不要なファイル・サードパーティライブラリの存在 
 
 ● Tree-shakableではないライブラリの存在 
 
 ● バンドルファイル分割の必要性 
 
 
 
 
 次ページではこれらの課題を解決していきます。 
 5

軽量化のアプローチ - その1（未使用ライブラリの削除）
 まず、各バンドルファイルで不要なファイル・ライブラリを洗い出しました。（以下） 
 ● レガシーブラウザ向けに追加したpolyfill（現在はサポート対象外ブラウザのため削除） 
 ● PC/SP向けに分けて実装されたHTML（現在はPC/SP統一済みのため削除） 
 ● 現在は使用していないComponentから参照されたサードパーティライブラリ など 
 
 また、webpackのalias設定に誤りがあり一部トランスパイル前のファイルがバンドルされていることが 
 発覚しました。トランスパイル後のファイルもバンドルされていたため、動作自体は問題ないのですが 
 不要なためバンドル対象外として認識されるように修正しました。 
 
 
 
 
 これにより、30〜50KB程度 削減
 
 
 6

軽量化のアプローチ - その2（TreeShakingの有効化）
 続いて、バンドルされるサードパーティライブラリの軽量化を行いました。 
 ライブラリの中にはバージョンが古く、webpackのtree-shakingが有効にならず 
 参照されていないコードも含めてバンドルされてしまっていたためバージョンを上げました。 
 また、影響が大きくバージョンアップは避けたもののライブラリの機能を個別にimportすることで 
 改善できるものはimportの書き方を変更することで対応しました。 
 
 例：RxJS5では以下のようにオペレータを個別にimportするとバンドルサイズを抑えることができます。
 （RxJS6ではtree-shakingが有効になるため、変更前の記述が望ましいです。）
 
 
 7 これにより、80〜100KB程度 削減


軽量化のアプローチ - その3（バンドルファイルの分割）
 最後にバンドルファイルの分割を行いました。 
 くらしのマーケットでサービスを予約する際、以下のような画面からサービスを検索します。 
 出張サービスのカテゴリごとに特徴が異なるため、カテゴリによって検索画面のUIや機能が異なります。 
 
 
 8 エアコンクリーニング 格安引越し 玄関の鍵開け

軽量化のアプローチ - その3（バンドルファイルの分割）
 しかし、バンドルファイル観点で見るとカテゴリを問わず検索画面として１つのバンドルファイルに 
 すべての機能が集約されていました。つまり「玄関の鍵開けカテゴリ」の検索画面で読み込まれるバンドルファイルに は「格安引越カテゴリ」の検索機能がバンドルされている状態でした。 
 
 
 
 
 
 
 
 
 
 この状態は無駄が大きく、あるカテゴリにコードを追加するたびに関連しない他のカテゴリのバンドルサイズにも影響 を与えてしまうため、カテゴリ観点でバンドルファイルを分割することにしました。 
 
 9

軽量化のアプローチ - その3（バンドルファイルの分割）
 以下のようにカテゴリごとに別々のバンドルファイルを生成し、各カテゴリの画面で必要なバンドルファイルを読み込むよ うに修正しました。
 幸いなことにカテゴリ間の依存関係はなく、共通機能はモジュール化されていたため 
 物理的にプログラムの分割を伴うような変更はなく整理することができました。 
 
 10 これにより、10〜30KB程度 削減


最終結果
 ここまで紹介したアプローチ＋α で最終的に以下の結果となりました。 
 重点的にバンドルファイルの分割をした画面Aは50%程度まで改善することができました。 
 11

今後の取り組み
 今回は軽量化施策の第1弾ということで対応しやすいものから対応を進めていました。 
 
 残課題
 ● AngularやWebpackなどのバージョンアップ 
 ○ Angularのバージョンがボトルネックで周辺ライブラリのバージョンアップができず Tree-Shakableではない古いライブラリを参照している 
 ○ バージョンアップによる最適化の恩恵を受けられていない 
 ● lodashやmoment.jsなどTree-Shakableではないライブラリからの移行 
 ● モジュール設計の全体的な見直し 
 など
 
 まだまだ改善すべき内容は残っているので、一緒に対応してくれる方を募集中です。 
 12

書いた人 13 2021年 みんなのマーケット 入社 フロントエンドエンジニアとして画面の新規作成や表示速度改善などに 取り組んでいます。 きたがわ エンジニア 以降のスライドはみんなのマーケットの会社紹介になります！！

会社紹介
 14

くらしのマーケットとは？ 15 生活の「困った」を解決できるプロが集まる プラットフォーム「くらしのマーケット」 頼める出張サービスの種類 事業者の数 300種類以上！
 70,000事業者を突破！
 エアコンクリーニング、引越し、庭木剪定..などの生活関連サービス 日本全国の事業者が登録、売上を伸ばしている

私たちのビジョン 16 正直者が馬鹿を見ない世界を作る
 テスト前に必死で勉強したのに、先輩から過去問をもらっていた友達が自分よりいい成績を取った…
 会社のことを思って地味な仕事も引き受けてきたのに、上司に気に入られている同期が昇進した…
 
 世の中では、不条理なことが起きます。
 でも、悪賢い人が得をして、正直な人が損をする世界なんて嫌です。
 
 江戸時代の思想家、石田梅岩は「二重の利を取り、甘き毒を喰ひ、自死するようなこと多かるべし」
 つまり、悪賢い者には必ず報いがあると説きました。
 さらに「実の商人は、先も立ち、我も立つことを思うなり」とも表し、
 まず相手の利害を優先し、その結果として自身も利益を得ることが商人の本文だと説きました。
 
 私たちは、先も立ち、我も立つ、正直な人が報われる世の中を作ります。


私たちのミッション 17 「人と人」が関わるサービスを、
 安心して取引できる仕組みを提供する
 私たちは、くらしのマーケットを通じて、
 世の中のあらゆるサービスをインターネットで安心して取引できる仕組みを提供していきます。
 インターネットでモノを買う時、みんなが楽天市場やAmazonを利用するように、
 サービスを買う時は、みんながくらしのマーケットを利用してくれる…そんな世界を目指します。
 
 多くのベンチャー企業が、自社の成長をアピールしますが、いちばん重要なことは、
 その会社がその時に「どれだけ成長しているか」ではなく、その会社が今後「どこまで成長できるか」です。
 
 みんなのマーケットは巨大な市場に挑んでいます。私たちと一緒に、大きく成長していきましょう。