AWS Amplifyを個別インポートに変えたらファイルサイズが激減した話

## はじめに

本記事はAWS Amplifyのインポート方法を変えたらbundleファイルのサイズが激減して嬉しかったことをまとめた記事になります。
利用する要素技術に対する詳細な説明は入れていませんのでご了承ください。

## TL;DR

- AWS Amplifyは、個別にインポートできると公式に書いてあった。
- サンプルアプリを作って試してみたら、bundleサイズが80%ほど削減された。
- 必要十分なモジュールだけインポートすることの大切さと、こまめに公式ドキュメントを見返した方がいいことを学んだ。

## 導入

AWS Amplifyとは、モバイルやWebアプリケーションを構築するための開発プラットフォームです。そしてその中には、認証やGraphQLエンドポイントへのHTTPリクエストや解析といったさまざまな機能を包括したライブラリも包含されています。
私も業務でこのライブラリを利用していますが、bundle後のJavaScriptのサイズが大きくなってしまうことが悩みでした。

そんなある日、公式ページにこんな記載を見つけました。
https://docs.amplify.aws/lib/auth/advanced/q/platform/js#using-modular-imports
`If you only need to use Auth, you can do: npm install @aws-amplify/auth which will only install the Auth module for you.`

意訳： Authモジュールだけ使うのであれば、`@aws-amplify/auth`だけinstallしましょう。

悩み解決しました。
が！！どれくらい軽くなるのか確かめるため調査してみることにしました。

## 検証方法

以下の手順で確認してみます。

1. ログイン画面とログイン後に遷移する画面の2画面を持つアプリケーションを作成
1. aws-amplifyをimportしてログイン・ログアウト機能を実装。ファイルサイズを計測
1. @aws-amplify/authをimportして再実装。ファイルサイズを計測
1. ファイルサイズがどれくらい小さくなるか確認する。

アプリケーションは、Vue CLIを利用して雛形を作成することにしました。
画面遷移させたかったのでVue Routerを追加していますが、それ以外はデフォルトの設定としています。

ファイルサイズの計測は、Vue CLIの機能が使えます。
`vue-cli-service build --report`を実行すると、[Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)によるレポートファイルが`/dist`配下に作成されるので、そちらを確認します。
参考：https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

## サンプルアプリケーション

ソースはこちらに置いたので、興味があれば見てくれると嬉しいです。
https://github.com/yytths/example-ampilfy-auth

※ `aws-amplify`で実装した後、`@aws-amplify/auth`を使って実装したコミットで上書いています。そのため、前者の実装を見る場合は以下のリンクから見てください。個別インポートの実装を見る場合は最新のmasterブランチを見てください。
https://github.com/yytths/example-ampilfy-auth/tree/79f530680e8620a56083a8f9d074ed4a83171468

### 画面図

簡単に作ったので質素ですが、以下のような画面になります。
※ ログインするためのユーザはCognitoで作成し認証済です。

- ログイン画面
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105200/cc927e94-ca1a-30f3-2d51-1e404a725dee.png)

- ログイン後画面
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105200/8df58dda-7091-c5a1-66f6-7324a5381af6.png)

### 実装
#### aws-amplifyをimportした場合

まず `npm i aws-amplify -S` でモジュールをインストールします。
signInする処理は以下のようにしました。

```
import Amplify from 'aws-amplify'

const config = {
  Auth: {
    identityPoolId: process.env.VUE_APP_IDENTITY_POOL_ID,        
    region: process.env.VUE_APP_REGION,
    identityPoolRegion: process.env.VUE_APP_IDENTITY_REGION,
    userPoolId: process.env.VUE_APP_USERPOOL_ID,
    userPoolWebClientId: process.env.VUE_APP_USERPOOL_CLIENT_ID,
  }
}

Amplify.configure(config)

export async function signIn(username, password) {
  return Auth.signIn(username, password);
}

```

手動設定するキーは以下から必要なものだけ抽出しており、バリューは環境変数から取得するようにしています。
https://aws-amplify.github.io/docs/js/authentication#manual-setup

#### @aws-amplify/authをimportした場合

aws-amplifyをpackage.jsonから削除し、
`npm i @aws-amplify/auth -S`して個別モジュールをインポートします。
そして2行（以下の★部分）書き換えます。

```
import Auth from '@aws-amplify/auth' // <-- ★

const config = {
  Auth: {
    identityPoolId: process.env.VUE_APP_IDENTITY_POOL_ID,        
    region: process.env.VUE_APP_REGION,
    identityPoolRegion: process.env.VUE_APP_IDENTITY_REGION,
    userPoolId: process.env.VUE_APP_USERPOOL_ID,
    userPoolWebClientId: process.env.VUE_APP_USERPOOL_CLIENT_ID,
  }
}

Auth.configure(config) // <-- ★

export async function signIn(username, password) {
  return Auth.signIn(username, password);
}
```

## 結果

`vue-cli-service build --report`でそれぞれ確認した結果が以下の通りです。
`Parsed Size`が、約3MBから約0.5MBと80%以上削減されていることが分かります。

- aws-amplifyをimportした場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105200/c42ec999-5c88-a83e-7e64-5a0f44be3a1e.png)

- @aws-amplify/authをimportした場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105200/8a922fa4-b2c6-3a88-0903-9cfe1f60c6ea.png)

図を見比べると、`aws-amplify`だけでなく、内部で呼ばれている`aws-sdk`や`lodash`も削減されていることが分かります。

※ 上図の元HTMLは、以下に配置しているので、興味ある方は見てみてください。
https://github.com/yytths/example-ampilfy-auth/tree/master/report


## まとめ

比較を行うまで、個別インポートに変更しても`aws-amplify`の部分のみ減少するとして100KB減少がせいぜいだなと思っていました。ここまでサイズ減少して素直に嬉しかったです。

今回はたまたま公式に解決方法がありましたが、ほかのモジュールのファイルサイズも減らそうとなった場合、どこに解決方法があるかわかりません。
そのため日ごろからアンテナを立てていきたいと思います。なにより公式はときどき見返す癖をつけた方がいいことを学びました。

また余談ですが、authモジュールに限らず、apiやanalyticsといった以下のリンクにあるモジュールは個別にインポート可能なようです。機会を設けて比較してみたいと思います。
参考: https://github.com/aws-amplify/amplify-js/tree/master/packages