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

はじめに

本記事は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しましょう。

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

検証方法

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

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

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

ファイルサイズの計測は、Vue CLIの機能が使えます。
vue-cli-service build --reportを実行すると、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で作成し認証済です。

ログイン画面
ログイン後画面

実装

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した場合
@aws-amplify/authをimportした場合

図を見比べると、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