Adding Amplify Auth to a Next.js project has a huge impact of the chunk size

Riley0111 commented 3 years ago

Describe the bug I want to use Amplify Auth with my Next.js project. After I added aws-amplify to my project and imported 'Auth' to my index page the First load size increased from 64.1 kB to 308 kB without adding anything else. I also tried to analyze the problem with the webpack-bundle-analyzer and noticed that a lot of crypto libraries got loaded and some of them like bn.js multiple times (see screenshot below).

To Reproduce

Create a new Next.js project
Add aws-amplify to your package.json
import {Auth} from 'aws-amplify'; in your index.js page

Expected behavior That the use of the aws-amplify Auth module will add way less than 240 kB to the first load size. Or is this an expected increase of size?

Code Snippet

package.json:

"dependencies": {
    "next": "^10.0.5",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "aws-amplify": "3.3.14"
  },

index.js

import Head from 'next/head'
import {Auth} from 'aws-amplify';

export default function Home() {
    Auth.currentAuthenticatedUser()

    return (
        <div className="container">
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>

            <main>
                <h1 className="title">
                    Welcome to <a href="https://nextjs.org">Next.js!</a>
                </h1>
            </main>
        </div>
    )
}

Screenshots Screenshot from the webpack bundle analyzer:

Page size without amplify:

Page size with amplify:

What is Configured? Amplify version: 3.3.14 Next.js version: 10.0.5

riceboyler commented 3 years ago

Can part of that deeper dive mentioned above include figuring out why using the @aws-amplify specific libraries (i.e. @aws-amplify/core, @aws-amplify/analytics, etc.) causes an error related to credentials, region or appid that is only resolved by using aws-amplify (the full library) instead? (FWIW, I dug into that error specifically, and it appears that for some reason, using @aws-amplify/core, the credentials never get passed through, while with aws-amplify they do.

podlebar commented 3 years ago

btw.. the same happens if you are using NuxtJS. import Auth from '@aws-amplify/auth' adds 73.5 kb gziped to the bundle..

jonas-scholz-obeyo commented 2 years ago

Hey, is there any update on this? I'm using nextjs 12 with aws-amplify and aws-amplify-react (for Authenticator), and it adds 150kb to the first load. Is there anything that I can do to reduce that?

fgiopp commented 2 years ago

I have the same problem reported by riceboyler: @aws-amplify/core, @aws-amplify/API/Storage, etc. causes an error related to credentials, region or appid that is only resolved by using aws-amplify (the full library).

Any update on this? I'm using Nextjs 12.

abdallahshaban557 commented 2 years ago

Hello everyone, we are investigating this issue further on our end. We will provide feedback once we have some next steps.

rnrnstar2 commented 2 years ago

Hi. I am also facing this problem. It consumes a fairly large bundle size. The following code cannot be removed because withSSRContext is not separated from aws-amplify.

import { withSSRContext } from 'aws-amplify/lib-esm';

rob1121 commented 2 years ago

Same issue Ive encountered on my nextjs project using @aws-amplify. I unable to get crendentials. Do we have any update on this?

ivanjd commented 2 years ago

This is a pretty annoying problem. None of the proposed solutions worked for us (we are on Next 12.2). Any updates will be highly appreciated.

abdallahshaban557 commented 2 years ago

Hello everyone, we have a tagged release that we are testing out that has bundle size reductions which also include removing the crypto libraries for NextJS apps. Could you try this tagged release and inform us if it reduces the bundle size for you - and what that reduction number look like to you?

In order to use this version, you can run the following command in your terminal: npm install aws-amplify@size-improvement

Reducing the bundle size is one of our highest priority - and your feedback would be so helpful to help us drive enhancements in that area!

shubhamsharma98 commented 2 years ago

Tried but no luck. The chunk sizer is absurdly high! Not sure how its building up this big. This is running in Chrome.

abdallahshaban557 commented 2 years ago

@shubhamsharma98 - is this after doing a production build? Or were you still debugging this? The size here is definitely much larger than we expect it to be.

shubhamsharma98 commented 2 years ago

Still in debugging, I'm a bit away from running the app in production but the numbers don't look very promising to go into production as-is. Any tips?

elie222 commented 2 years ago

Still in debugging, I'm a bit away from running the app in production but the numbers don't look very promising to go into production as-is. Any tips?

Tip is to run a production build and then look at the numbers 😂 You can run the production build today. You don't need to wait for the app to go live. In Next it would be: next build

shubhamsharma98 commented 2 years ago

@elie222 thanks for the tip. I'm new to this so perhaps that's why it was amusing to you but I'll do that and revert with my findings.

dr-star commented 1 year ago

Hello everyone, we have a tagged release that we are testing out that has bundle size reductions which also include removing the crypto libraries for NextJS apps. Could you try this tagged release and inform us if it reduces the bundle size for you - and what that reduction number look like to you?

In order to use this version, you can run the following command in your terminal: npm install aws-amplify@size-improvement

Reducing the bundle size is one of our highest priority - and your feedback would be so helpful to help us drive enhancements in that area!

Are you planning to introduce the optimization version also for amplify v5?

abdallahshaban557 commented 1 year ago

@dr-star - the optimization was released with V5! You can try it now.

adarsh-drishya commented 1 year ago

Hi @abdallahshaban557 ,what do you say of this? how do i optimize it. as my development has be slow for a long time now. Below are the packages i am using from amplify in my Nextjs project "@aws-amplify/api": "5.0.9", "@aws-amplify/auth": "5.0.2", "@aws-amplify/cache": "5.0.11", "@aws-amplify/core": "5.0.11", "@aws-amplify/storage": "5.0.9",

Dizzzmas commented 1 year ago

photo_2023-03-14 20 59 10 Experienced the same issue with my Next app today. I was hoping to use aws-amplify and @aws-amplify/ui-react to integrate Cognito Auth into my frontend quickly. Unfortunately, this issue makes amplify unusable for our team.

abdallahshaban557 commented 1 year ago

Hello everybody, our team has been focusing on reducing the bundle size of the Amplify library, and starting v 5.2.5, we have been able to reduce the bundle size for the below use cases:

    * Amplify core + Auth category: 73kB → 54kB (-26%)
    * Amplify core + Analytics category: 56kB → 30kB (-46%)

This is only the first step in our bundle size reduction efforts. In our next major version of Amplify JavaScript, we are going to provide better mechanisms for tree-shaking that will substantially reduce the bundle size. Stay tuned - we will provide updates on this issue when we have expected timelines mapped out.

Please try out the newest version of Amplify, and let us know if you are seeing the improvements I've mentioned! Your feedback is essential to helping us improve our library!

GriffinSauce commented 1 year ago

Still in debugging, I'm a bit away from running the app in production but the numbers don't look very promising to go into production as-is. Any tips?

Tip is to run a production build and then look at the numbers 😂 You can run the production build today. You don't need to wait for the app to go live. In Next it would be: next build

To be fair here: adding Amplify, Auth and Storage balloons the dev chunks by 5 MB. Even if that doesn't have impact on users it does have impact on DX and burns dev time.

abdallahshaban557 commented 1 year ago

Hello @GriffinSauce - as part of our next major version, we are planning to substantially reduce the installation and bundle size for Amplify, both client and server side if you are building with NextJS. You can learn more about our areas of focus here.

You can also provide us with feedback here if there are other things you are interested in seeing from Amplify JavaScript! https://github.com/aws-amplify/amplify-js/issues/11833

cwomack commented 12 months ago

With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved! Please refer to our release announcement, migration guide, and documentation for more information.

aws-amplify / amplify-js

Adding Amplify Auth to a Next.js project has a huge impact of the chunk size #7570