Amplify bundle seems exsessively large

[gmzacharydovel]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Not applicable

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

No response

Backend

None

Environment information

I'm using Deno/esbuild/webpack for repro.

Describe the bug

The size of amplify seems excessive when you aren't using the UI. Usually this is a hint that barrel exports are happening including a lot of unneeded stuff (regardless of tree shaking)

With Webpack I am seeing 120KB versus 176KB on output sizes when doing static imports versus dynamic imports.

With esbuild it is 135KB versus 169KB on output sizes for static versus dynamic.

I'm seeing it going down to about 40KB gzipped/broccoli over the network.

Expected behavior

I would hope that amplify isn't double the size of my initial loaded bundle being just an auth library and where I am not even using the UI parts. Importing only:

import { Amplify } from "aws-amplify";
import {
  confirmSignUp,
  resetPassword,
  signOut,
  signUp,
} from "aws-amplify/auth";

console.log(Amplify);
console.log({ confirmSignUp, resetPassword, signOut, signUp });

the size of my bundles will be double the size. Only importing this is 135.5kb

Reproduction steps

aws-amplify-size-repro.zip

I've included an example repro.

1. Install deno -> https://deno.com/
2. deno install
3. deno task webpack (to build with webpack to see the outputs in the build directory)
4. deno task esbuild (to build with esbuild to see the outputs in the build directory)

Code Snippet

No response

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[gmzacharydovel]

I really don't understand how just importing the auth logic can include so much code. I said it before, but I'm probably going to write my own integrations to skip all of the fat here.

I'm thinking maybe the size is more palatable if you are using the react ui mechanisms of this package... but this is still really large even for just that.

[gmzacharydovel]

So get into the details- Here is a login function for cognito and it uses 580b. Lets say you have 20 methods for a full cognito implementation, this would be about 11.6kb (uncompressed, minified).

const region = "ap-northeast-1"; // replace with your AWS region
const clientId = "YOUR_COGNITO_APP_CLIENT_ID"; // from your User Pool app client
const username = "example@email.com";
const password = "YourPassword123!";

async function loginToCognito() {
  const url = `https://cognito-idp.${region}.amazonaws.com/`;

  const body = {
    AuthParameters: {
      USERNAME: username,
      PASSWORD: password,
    },
    AuthFlow: "USER_PASSWORD_AUTH", // or "ADMIN_USER_PASSWORD_AUTH" for admin use
    ClientId: clientId,
  };

  const headers = {
    "Content-Type": "application/x-amz-json-1.1",
    "X-Amz-Target": "AWSCognitoIdentityProviderService.InitiateAuth",
  };

  try {
    const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify(body),
    });

    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}`);
    }

    const data = await response.json();
    console.log("Login success:", data);

    // The response includes tokens:
    // data.AuthenticationResult.IdToken
    // data.AuthenticationResult.AccessToken
    // data.AuthenticationResult.RefreshToken

    return data.AuthenticationResult;
  } catch (err) {
    console.error("Login failed:", err);
  }
}

loginToCognito();

This is conservative in that I only see 15 response challenges as shown below.

[
1.  "SMS_MFA", 
2.  "EMAIL_OTP", 
3.  "SOFTWARE_TOKEN_MFA", 
4.  "SELECT_MFA_TYPE", 
5.  "MFA_SETUP", 
6.  "PASSWORD_VERIFIER", 
7.  "CUSTOM_CHALLENGE", 
8.  "SELECT_CHALLENGE", 
9.  "DEVICE_SRP_AUTH", 
10. "DEVICE_PASSWORD_VERIFIER", 
11. "ADMIN_NO_SRP_AUTH", 
12. "NEW_PASSWORD_REQUIRED", 
13. "SMS_OTP", 
14. "PASSWORD", 
15. "WEB_AUTHN", 
16. "PASSWORD_SRP"
]

This is also assuming that the code between methods isn't reduced by shared code.

What I don't understand is how 11.6kb can become 136kb

Assuming that the same functions are repeating over and over again, brotli compression would still bring the whole of everything under a 1kb.

[gmzacharydovel]

Interestingly enough, I had AI generate code that looks mostly correct which I will be using as a base running at 24kb before minimization

auth-implementation.js

and compression. After compression it is about 5kb.

[gmzacharydovel]

The amplify library is about 10x the size after brotli while having less functionality.

[soberm]

Hey @gmzacharydovel,
thanks for the thorough investigation and bringing this issue to our attention again. We'll discuss this internally with the team to explore optimization opportunities in the future.

[gmzacharydovel]

@soberm I'm going to keep digging as I'm still pretty new to all of these different auth types. 🙇 cognito is a powerful beast with a lot of features.