Amplify UI利用時のバンドルサイズを削減してみた

こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。

最近、Amplify UIを利用してAngularのプロジェクトを開発していますが、このプロジェクトのバンドルサイズが気になったので調べてみました。結果としては、想定外に「@aws-sdk」が多くを占めており特に意識して利用もしていない状況だったので、削減対応をしてバンドルサイズを減らしてみました。

前提

Angularは9.0.4を利用しています。また、Amplifyは3.0.21を利用している環境です。

    "aws-amplify": "3.0.21",

現状把握

まずは現状の把握からです。バンドルを可視化できる「webpack-bundle-analyzer」を利用して、現状のバンドルを確認してみます。

結果がこちら。

「@aws-sdk」がやたらでかい…！vendorの大半を占めている状況です。

こちらは特に意識して利用してはいないのですが、Amplifyが内部で利用しているのかと思います。これを削減してみます。

対応方法は？

どうにか減らす方法はないものかと探していたところ、以下のIssueを見つけました。

こちらによると必要なものだけに限定して利用すると良い旨の回答が見られました。そこで、package.jsonを見直して以下のようにaws-amplifyを指定するのではなく、個別に利用するものだけ指定するよう変更してみます。

    "@aws-amplify/auth": "3.3.2",
    "@aws-amplify/core": "3.4.3",
    "@aws-amplify/storage": "3.2.10",
    "@aws-amplify/ui-angular": "0.2.12",

現在のプロジェクトでは、Amplify UIを利用したログイン画面と、それに伴う認証関連の処理しか利用していないため、意識して利用しているのはui-angularとauthになります。coreについてはこれらの前提として必要になるので含めています。

また、一見storageは不要と思えるのですが、実際にこれを削除したところビルド時にエラーが発生しました。どうも内部で利用しているのでこれも含めます。

削減結果

これで削減されたかを再びビルドして確認してみます。

がっつり減りました！削減前の「Stat size」を撮り忘れたのが悔やまれるのですが、「@aws-sdk」のサイズが587.98KBまで落ちています。これで目的は達成とします。

まとめ

以上、Amplify UI利用時にバンドルサイズ削減をした話でした。意識していないとバンドルサイズが増えていることもあるので、気を付けたいと思います。

どなたかのお役に立てば幸いです。それでは！