Amplify-js: Considerable bundle size increase when upgrading from @aws-amplify/[email protected] to @aws-amplify/[email protected]

Created on 1 Dec 2020  路  6Comments  路  Source: aws-amplify/amplify-js

Hi!

We're trying to upgrade to latest @aws-amplify/auth and we noticed a considerable build size increase. Our vendor bundle went from 213,58KB to 304,46KB.

Looking into npm it seems the unpacked size went from 2.16 MB to 6.47 MB. Any chance there's a way to decrease this bundle size? Maybe opt out some features not needed for some apps. Is there any on going project / task to try decrease that bundle size?

We haven't found any bugs with 3.4.13, so far all good. But since this build increase affects our TTI I was hoping to understand better what happened or how we could make it better moving forward with amplify/js.

Build needs-discussion

Most helpful comment

I think I've identified part of the issue and have got the ball rolling with a detailed PR here https://github.com/aws-amplify/amplify-js/pull/7521

Thanks everyone for your stats and input; they have helped in corroborating my initial findings :)

All 6 comments

More specifically, it's between 3.4.0 and 3.4.2, or aws-amplify 3.1.0 and 3.2.0.

On aws-amplify 3.1.0 (auth 3.4.0), my bundle size is 216kb. On aws-amplify 3.2.0 (auth 3.4.2), my bundle size is 301kb.

still having problems with this issue
image

bundle size increased from 200kb gzip to 440kb gzip after I installed @aws-amplify/auth and called AmplifyAuth.configure() method

image

This is a very important problem in my opinion. I have to support this.
In my case, I only use:
import Amplify from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'

It increases the size of the application by 244 kb ! It's way too much to just handle authentication !
Chrome DevTools tells us that most of the javascript isn't even executed. So it's an optimization problem.

From what I've seen, if we use the Auth module, all the functions of this class are imported. There must be a way to optimize that. Maybe with more targeted dynamic imports in that class? I'm talking about a big refactoring.

I found nothing else to fix it. If anyone has a better solution, that would be great.
I'm also thinking about using amazon-cognito-identity-js on the client to cut over the amplify's overload..

Here are the versions I am currently using:

@aws-amplify/auth": "^3.4.16,
@aws-amplify/core": "^3.8.8,

Edit:

It may not be important but ...
After some investigation, I found that after installing the last @preview version(3.0.18-preview.4), the size was drastically reduced by over 50%. Since I am just using Auth basic functions (signUp, signIn, signOut, ect ...) everything seems to work fine.
This package is more than 6 months old. It proves that it is possible to have a smaller bundle size.
However, I know it's old, so not recommended in production.

I think I've identified part of the issue and have got the ball rolling with a detailed PR here https://github.com/aws-amplify/amplify-js/pull/7521

Thanks everyone for your stats and input; they have helped in corroborating my initial findings :)

My bundle, from 7484.

You can significantly reduce your dev bundle by using @aws-amplify/auth, etc., rather than aws-amplify as instructed in the Amplify React docs.

Was this page helpful?
0 / 5 - 0 ratings