How to optimize the packaged/bundle size? #10727

chenhaiyun · 2022-11-30T08:01:13Z

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

Vue

Amplify APIs

Analytics

Amplify Categories

analytics

Environment information

# Put output below this line
vue: 2.6
[email protected]

Describe the bug

I use the amplify analytics JS SDK to send data to Kinesis. and after run npm run build, the amplify bundle size is too large. I have made a test and I found whether I use the aws-amplify library or the independent library (@ aws-amplify/core, @ aws-amplify/auth, @ aws-amplify/analytics), the packaged bundle size were the same. I want to know is there any other way to optimize the packaged/bundle size?

Expected behavior

I want to reduce the bundle size

Reproduction steps

create an vue project
npm run build and record the bundle size
add amplify analytics module to send data to KDS
run npm run build and record the bundle size
create another vue project
add @amplify/core @amplify/auth @amplify/analytics package
run npm run build and record the bundle size

Code Snippet

// Put your code below this line.

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

The text was updated successfully, but these errors were encountered:

mattiLeBlanc · 2022-12-08T06:11:08Z

Hi, I am having the same question.
I use the aws-amplify package and only the modules Auth and API.
When I do a build without these 2 imports I lose almost 500kB of size in my main bundle, which is huge.

I only use Auth and graphql. Is there anyway to reduce the size because 500kB is just to much, there must be a lot of JS code that is not relevant that can;t be treeshaken.

abdallahshaban557 · 2022-12-08T16:42:59Z

Hi @chenhaiyun and @mattiLeBlanc - our team is investigating improvements to the bundle size for Amplify. We will provide you with updates when we have the next steps identified. Thank you for providing us with this feedback!

kevinausmh · 2023-01-02T21:30:47Z

Hi, I'm facing the same problem. I noticed that the PinPoint client from aws-sdk is also bundled, although it should not be necessary when using the Kinesis provider. (Using core & analytics)

abdallahshaban557 · 2023-01-03T20:32:06Z

Hi @kevinausmh - we have observed this in our analysis as well. We are working on improving tree shaking for this scenario as part of our overall plan to reduce the bundle size of our packages.

blainekasten · 2023-02-09T15:44:26Z

Tree shaking is not supported in react native fwiw, It would be ideal to restructure the library like firebase has to ensure only imported libraries are bundled.

abdallahshaban557 · 2023-02-09T18:28:50Z

@blainekasten - we are thinking about that as well! We are working on a way to ensure we serve our JavaScript web and React Native customers. Thank you for the feedback - definitely on our radar!

abdallahshaban557 · 2023-06-10T00:41:16Z

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!

mattiLeBlanc · 2023-06-12T09:09:27Z

Thank you. Can't for the new version which could drastically reduce the bundle size.
Much appreciated!

ennioVisco · 2023-06-28T09:27:39Z

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!

@abdallahshaban557 I'm not sure how you're counting bytes at AWS, this is what I see in v5.5.1:

And then there are:

amazon-cognito-identity-js that adds up for 75.0KB
@aws/crypto that adds up for 13.5KB

And then of course there are all the node-specific dependencies that add up if we are using the library on the browser side, most-notably buffer-js: 24.7KB.

abdallahshaban557 · 2023-06-30T01:56:50Z

Hi @ennioVisco - can we please get your package.json so that we can further check this?

ennioVisco · 2023-06-30T06:33:42Z

Hi @ennioVisco - can we please get your package.json so that we can further check this?

@abdallahshaban557 sure! Here it is: https://gist.github.com/ennioVisco/1259d50837041396507299a827dbfc5c

abdallahshaban557 · 2023-07-06T00:13:17Z

Hi @ennioVisco - can you please try deleting your node_moduled folder, and then re-installing your dependencies and checking your bundle size? We are still seeing smaller bundle sizes when we tried reproducing this.

rm -rf node_modules
yarn/npm install

ennioVisco · 2023-07-06T06:29:04Z

Ok, @abdallahshaban557 in a clean install sizes are a bit different. If the sizes you mentioned are gzipped, I guess more or less it checks out, otherwise, I get these:

@[email protected][email protected]/node_modules/@aws-amplify/auth/lib-esm ~55KB (Gzip: ~15KB)
@[email protected][email protected]/node_modules/@aws-amplify/core/lib-esm ~69KB (Gzip: ~29KB)
[email protected]/node_modules/amazon-cognito-identity-js/es ~55KB (Gzip: ~18KB)

with some very minor extra dependencies, not relevant for this analysis.

abdallahshaban557 · 2023-07-06T14:45:59Z

Hi @ennioVisco - that is correct, the sizes mentioned are gzipped! I am glad you are seeing closer results to our analysis.

abdallahshaban557 · 2023-07-14T21:04:15Z

Hello everyone, We have made some additional changes to reduce the bundle size which include reduction to the Storage category as part of [email protected]. Below are our updated reduction numbers for the gzip bundle size.

The results are generated using size-limit tool v8.2.6 and bundler webpack 5.88.0.

Please let us know if you are seeing these reductions in your apps.

Amplify core + Auth category: 73kB → 54kB (-26%)
Amplify core + Analytics category: 56kB → 30kB (-46%)
Amplify core + Storage category: 71KB → 38kB (-53%).

Make sure to delete your node_modules folder and then re-install your dependencies to validate the bundle size reduction.

mattiLeBlanc · 2023-07-16T05:37:21Z

I actually saw an increase in bundle size:
"aws-amplify": "^5.3.4"

Initial Chunk Files           | Names                                                          |  Raw Size | Estimated Transfer Size
main.c9294920e0fb3feb.js      | main                                                           |   1.61 MB |               331.52 kB
styles.45c175ecf67a26df.css   | styles                                                         | 156.14 kB |                11.65 kB
polyfills.f34159776d2cef6e.js | polyfills                                                      |  33.07 kB |                10.68 kB
runtime.a3c9c54fc9486aa2.js   | runtime                                                        |   4.35 kB |                 2.09 kB

"aws-amplify": "^5.2.5",

Initial Chunk Files           | Names                                                          |  Raw Size | Estimated Transfer Size
main.ab3c1696c8cd858e.js      | main                                                           |   1.59 MB |               330.50 kB
styles.45c175ecf67a26df.css   | styles                                                         | 156.14 kB |                11.65 kB
polyfills.f34159776d2cef6e.js | polyfills                                                      |  33.07 kB |                10.68 kB
runtime.a3c9c54fc9486aa2.js   | runtime                                                        |   4.35 kB |                 2.09 kB

I am only using import { Auth, API } from 'aws-amplify';

abdallahshaban557 · 2023-07-18T00:19:34Z

Hi @mattiLeBlanc - can you please try deleting your node_modules folder and then re-installing your dependencies? Also, can you please provide us with your package.json to further investigate this?

mattiLeBlanc · 2023-07-18T01:43:12Z

@abdallahshaban557
I ran a production configuration angular build again:

Initial Chunk Files           | Names                                                          |  Raw Size | Estimated Transfer Size
main.8c2b5731f3d94ee6.js      | main                                                           |   1.62 MB |               331.85 kB
styles.45c175ecf67a26df.css   | styles                                                         | 156.14 kB |                11.65 kB
polyfills.f34159776d2cef6e.js | polyfills                                                      |  33.07 kB |                10.68 kB
runtime.8ea17c38f91e9648.js   | runtime                                                        |   4.35 kB |                 2.09 kB

                              | Initial Total                                                  |   1.80 MB |               356.27 kB

My package file:

{
  "name": "apollo-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "createVersionFile": "node create-version.js",
    "extract-translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/en.json --sort --format namespaced-json --marker _",
    "aws:init": "npx ts-node --project tsconfig.aws.json scripts/aws-init.ts",
    "deploy": "cdk deploy --require-approval never",
    "cdk": "cdk"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.2",
    "@angular/cdk": "^16.0.1",
    "@angular/common": "^16.0.2",
    "@angular/compiler": "^16.0.2",
    "@angular/core": "^16.0.2",
    "@angular/forms": "^16.0.2",
    "@angular/material": "^16.0.1",
    "@angular/material-moment-adapter": "^16.0.1",
    "@angular/platform-browser": "^16.0.2",
    "@angular/platform-browser-dynamic": "^16.0.2",
    "@angular/router": "^16.0.2",
    "@angular/youtube-player": "^16.0.1",
    "@iplab/ngx-file-upload": "^16.0.1",
    "@vimeo/player": "^2.18.0",
    "angular-google-tag-manager": "^1.8.0",
    "aws-amplify": "^5.3.4",
    "axios": "^1.3.4",
    "dayjs": "^1.11.7",
    "nosleep.js": "^0.12.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.2",
    "@angular/cli": "~16.0.2",
    "@angular/compiler-cli": "^16.0.2",
    "@types/jasmine": "~4.3.0",
    "@types/node": "10.17.27",
    "@types/prettier": "2.6.0",
    "@types/vimeo__player": "^2.16.3",
    "@types/youtube": "^0.0.47",
    "aws-cdk": "2.50.0",
    "aws-cdk-lib": "2.50.0",
    "aws-sdk": "^2.1256.0",
    "constructs": "^10.0.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "source-map-support": "^0.5.21",
    "ts-node": "^10.9.1",
    "typescript": "~5.0.4"
  }
}

abdallahshaban557 · 2023-07-18T04:30:31Z

Hi @mattiLeBlanc - thank you for providing this information. Our team will get back to you!

bolshchikov · 2023-07-18T05:15:38Z

Having the same issue when importing @aws-amplify/core and @aws-amplify/auth. The bundle size stays the same as importing the whole aws-amplify.
I'm running Vite with React and Typescript.

jimblanc · 2023-07-18T14:12:09Z

@bolshchikov What was the size of your @aws-amplify/auth import before v5.2.5 (and what version of Amplify were the metrics you posted generated with)? The numbers you're seeing line up pretty well with what's being reported in Bundlephobia for the new release. As a note, we recommend that customers use the aws-amplify package. Using the scoped packages won't provide much of a direct bundle size benefit as unused categories would still get tree-shaken out by your bundler.

elorzafe · 2023-07-18T17:35:46Z

@mattiLeBlanc I see there is a duplication of axios package dependency, can you use the same that is using Amplify "axios": "0.26.0",

elorzafe · 2023-07-18T19:37:44Z

I can confirm that deduping axios dependency it would reduce the bundle size by 6.2KB

mattiLeBlanc · 2023-07-19T00:36:14Z

@elorzafe

I am not sure I understand. i am using Axios for my own purposes. I didn't know Amplify or shouldn't care that Amplify has a dependency on that Axios, right?
It is also a very old version. I am using "axios": "^1.3.4",. If Amplify would decide to drop Axios, my code would break because I can't reference Axios in my own dependencies?

I only see one folder of Axios in my node modules.
I also do not see "axios": "0.26.0", in the package file ofaws-amplify.

Can you elaborate where you get this from?

elorzafe · 2023-07-19T00:46:31Z

@mattiLeBlanc

I am not saying you should drop axios but just consider to use the same as Amplify to reduce the dependency duplication.

@aws-amplify/api-rest has a dependency on [email protected] so if you have another version of axios installed it will duplicate that package unnecessary but I understand that version of axios is not what you need.

I am just trying to help to reduce some of the dependency on your app and Amplify, but I understand if is not possible.

I couldn't reproduce the bundle size increase you mention maybe there was another dependency that change that impact the bundle size increase.

Are you sure the only thing that change on your package.json was the version of aws-amplify?

mattiLeBlanc · 2023-07-19T01:05:28Z

@elorzafe
Sorry if I made you feel I was annoyed, that is not what I meant.
I would not prefer to go down to such an old version of Axios, I would even recommend for Amplify to update their dependencies for security concerns.

I did a compare between 2 package files and yes, this the only change.
Of course I did evolve my app between now and 1 week ago. Maybe that is causing the bigger main file?

elorzafe · 2023-07-19T16:57:58Z

@mattiLeBlanc
No worries, we are in the middle of the process of improving the dependencies of Amplify, and hopefully that works better for you.

I think the changes on your App probably made the main file to be bigger, we are working very hard to make the code of Amplify small as possible. We are tracking this issue to communicate more improvements.

Thanks again for your feedback!

mattiLeBlanc · 2023-07-20T02:39:33Z

@elorzafe Much appreciated of course, all the work you are doing!
As an end user of your product, I would love to be able to only use AUTH, and Graphql API and perhaps the pub-sub part to enable Grahpql Subscriptions.
If it would be possible to just import modules you need, it would result in a much smaller footprint I think.
I reported in December 2022 that I was getting an extra 500kb of package size due to using AUTH and API, which to me sounds much to big. So I guess it brings in a lot of unwanted code.
If you could separate that, that would be awesome!

ennioVisco · 2023-07-20T06:17:00Z

@elorzafe Much appreciated of course, all the work you are doing! As an end user of your product, I would love to be able to only use AUTH, and Graphql API and perhaps the pub-sub part to enable Grahpql Subscriptions. If it would be possible to just import modules you need, it would result in a much smaller footprint I think. I reported in December 2022 that I was getting an extra 500kb of package size due to using AUTH and API, which to me sounds much to big. So I guess it brings in a lot of unwanted code. If you could separate that, that would be awesome!

I share a lot of you frustration. I think the mistake we made is to use aws-amplify which is the kids' tool instead of directly aws-sdk which is the adults' one.
It doesn't even look that hard to develop an Auth flow in aws-sdk@3

abdallahshaban557 · 2023-07-20T17:04:27Z

Hello @mattiLeBlanc and @ennioVisco - as part of our next major version, we are moving to a more functional approach where you can import specifically the functionality that you need from our categories. We are also removing some of our underlying dependencies and relying more on browser APIs to reduce the bundle sizes further. Please let us know if you have further feedback on Bundle sizes to share.

nolotz · 2023-07-20T22:18:12Z

Hello @mattiLeBlanc and @ennioVisco - as part of our next major version, we are moving to a more functional approach where you can import specifically the functionality that you need from our categories. We are also removing some of our underlying dependencies and relying more on browser APIs to reduce the bundle sizes further. Please let us know if you have further feedback on Bundle sizes to share.

Hi @abdallahshaban557
All of these changes sound super exciting! Just wondering, do you guys have any ETA for the next major version? Or perhaps there are some tickets we could follow to keep an eye on the progress? Thanks a bunch!

abdallahshaban557 · 2023-07-21T02:16:56Z

Hi @nolotz - I would recommend you keep an eye out on this TypeScript RFC, we will be posting further updates on it! #11113

We do not have an ETA we can share yet, but we will share a status and a preview of what the next major version will look like soon.

BearCooder · 2023-07-23T09:20:49Z

@aws-amplify/api-rest has a dependency on [email protected]

I suppose replacing the axios dependency with fetch() API in the aws package could be a todo.

Some differences to note:

fetch is very lean, so there aren't any out of the box features that comes with Axios (e.g. auto JSON data transformation, response timeouts)
Some potential browser incompatibility that might be introduced by fetch. Axios is built using XMLHttpRequest, making it very browser friendly, even with very old browsers
In Axios, anything HTTP code 400 and above are considered errors. Fetch just sees them all as responses and will not reject any promises, so we will need to handle them in Taquito accordingly since we have been relying on Axios response errors in some of our code

The benefits of using fetch as opposed to Axios are as follows:

fetch is a built in feature in Node, so no package imports are necessary
Since it's a built in Node feature, there no chance it will conflict with other packages
It gives us more flexibility to what we want to implement as opposed to something that's abstracted like Axios
Removes the dependency on Axios when something doesn't work properly

mattiLeBlanc · 2023-07-23T11:47:34Z

Why not stick with Axios, but maybe a newer version? Unless it adds extra weight and you can replace the missing features with some microjs packages ?

abdallahshaban557 · 2023-07-23T19:14:36Z

Hi @BearCooder - that is exactly what we going to do as well! We want to remove any dependencies that can be used natively by your browser to help reduce the bundle size impacts even further. We are going to be doing the same effort for other parts of our library!

CGarces · 2023-09-17T12:46:14Z

My use case:

-Very simple amplify web without any framework, the only dependency at package.json is "aws-amplify": "^5.3.11"
-I'm only using a REST API, a single call.

import { API } from '@aws-amplify/api';
import awsconfig from './aws-exports';
API.configure(awsconfig);

Bundle size:
361 KiB (95.35 kB gziped)

After comment de imports and the API call.

13KiB (2.01 KiB gziped)

+300 KiB added just to made API.configure + API.post, probably I'll remove the aws-amplify and just made a standard fetch call.

I have tested webpack and esbuild to try to treeshaking, the best that I can get is 361 KiB and 405 KiB

mattiLeBlanc · 2023-09-30T08:50:42Z

Hi, how are we doing with this.
Just a quick example of my Angular 16 app with Amplify AUTH and API:

Initial Total | 1.21 MB | 258.75 kB

and without those to items:

Initial Total | 836.20 kB | 178.86 kB

So, 400 kb for an API class and the Auth class. That is pretty big, right?
When we just have more modular access to a GraphQL Api class and a Subscription class and a Auth class?

abdallahshaban557 · 2023-10-05T19:51:54Z

Hello @mattiLeBlanc - you can check out our dev preview for v6 of the Amplify JavaScript library which has our new changes to reduce the bundle size and provide a more "functional" approach to importing only the functionality you need. #12147

Once we feel confident with this new experience, we will release it in general availability. We are seeing massive reductions in bundle size with this new version. It is most definetely top of mind for us! Please let us know if you have any feedback to share after trying it out!

mattiLeBlanc · 2023-10-06T02:14:59Z

I tried and left comments, I am having trouble testing it due to migration issues/differences.

cwomack · 2023-11-16T22:02:28Z

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.

mattiLeBlanc · 2023-11-20T10:09:18Z

@cwomack I mentioned some feedback and issues in the other thread:
https://github.com/aws-amplify/amplify-js/issues/12147#issuecomment-1815517219

tannerabread added Build Related to build issues pending-triage Issue is pending triage bundle-size labels Nov 30, 2022

cwomack self-assigned this Nov 30, 2022

stocaaro added the feature-request Request a new feature label Mar 23, 2023

stocaaro removed the pending-triage Issue is pending triage label Apr 5, 2023

renebrandel mentioned this issue Sep 28, 2023

RFC: Amplify JS Library v6 Developer Preview - Smaller Bundle Size, Improved TypeScript and Next.js support #12147

Closed

cwomack closed this as completed Nov 16, 2023

smimicha mentioned this issue Jun 17, 2024

Very large bundle sizes in V6? #13501

Closed

3 tasks

How to optimize the packaged/bundle size? #10727

How to optimize the packaged/bundle size? #10727

Comments

chenhaiyun commented Nov 30, 2022

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Categories

Environment information

Describe the bug

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

mattiLeBlanc commented Dec 8, 2022

abdallahshaban557 commented Dec 8, 2022

kevinausmh commented Jan 2, 2023

abdallahshaban557 commented Jan 3, 2023

blainekasten commented Feb 9, 2023

abdallahshaban557 commented Feb 9, 2023

abdallahshaban557 commented Jun 10, 2023

mattiLeBlanc commented Jun 12, 2023

ennioVisco commented Jun 28, 2023 • edited Loading

abdallahshaban557 commented Jun 30, 2023

ennioVisco commented Jun 30, 2023 • edited Loading

abdallahshaban557 commented Jul 6, 2023

ennioVisco commented Jul 6, 2023 • edited Loading

abdallahshaban557 commented Jul 6, 2023

abdallahshaban557 commented Jul 14, 2023 • edited Loading

mattiLeBlanc commented Jul 16, 2023 • edited Loading

abdallahshaban557 commented Jul 18, 2023

mattiLeBlanc commented Jul 18, 2023

abdallahshaban557 commented Jul 18, 2023

bolshchikov commented Jul 18, 2023 • edited Loading

jimblanc commented Jul 18, 2023 • edited Loading

elorzafe commented Jul 18, 2023

elorzafe commented Jul 18, 2023

mattiLeBlanc commented Jul 19, 2023

elorzafe commented Jul 19, 2023

mattiLeBlanc commented Jul 19, 2023

elorzafe commented Jul 19, 2023

mattiLeBlanc commented Jul 20, 2023

ennioVisco commented Jul 20, 2023

abdallahshaban557 commented Jul 20, 2023

nolotz commented Jul 20, 2023

abdallahshaban557 commented Jul 21, 2023

BearCooder commented Jul 23, 2023

mattiLeBlanc commented Jul 23, 2023 • edited Loading

abdallahshaban557 commented Jul 23, 2023

CGarces commented Sep 17, 2023

mattiLeBlanc commented Sep 30, 2023 • edited Loading

abdallahshaban557 commented Oct 5, 2023

mattiLeBlanc commented Oct 6, 2023

cwomack commented Nov 16, 2023

mattiLeBlanc commented Nov 20, 2023

ennioVisco commented Jun 28, 2023 •

edited

Loading

ennioVisco commented Jun 30, 2023 •

edited

Loading

ennioVisco commented Jul 6, 2023 •

edited

Loading

abdallahshaban557 commented Jul 14, 2023 •

edited

Loading

mattiLeBlanc commented Jul 16, 2023 •

edited

Loading

bolshchikov commented Jul 18, 2023 •

edited

Loading

jimblanc commented Jul 18, 2023 •

edited

Loading

mattiLeBlanc commented Jul 23, 2023 •

edited

Loading

mattiLeBlanc commented Sep 30, 2023 •

edited

Loading