modularization/tree shaking not working? (3.0.10)

[jliebrand]

This is a follow on from previous issues I raised (#488) and also (#3365).

I've just created a brand new app, and I'm pulling in aws-amplify v3. I'm only using auth and api, but the resulting bundle is still 378kb . Am I doing something wrong?

    "aws-amplify": "^3.0.9",

and in my code:

import { Amplify, Auth, API } from 'aws-amplify';
...
  Amplify.configure({
    Auth: {
      mandatorySignIn: true,
      region: process.env.AWS_REGION,
      userPoolId: process.env.AWS_USER_POOL_ID,
      identityPoolId: process.env.AWS_IDENTITY_POOL_ID,
      userPoolWebClientId: process.env.AWS_APP_CLIENT_ID
    },
    API: {
      endpoints: [
        {
          name: 'my-api',
          endpoint: process.env.AWS_API_GATEWAY_URL,
          region: process.env.AWS_REGION
        }
      ]
    }
  });

...

return Auth.currentAuthenticatedUser()

...

  return API
    .get('my-api', '/endpoint')
    .then(res => console.log(re))

The resulting bundle is 378kb and still includes things like GraphQL? Why is that not removed (with the new tree shaking)?

[jliebrand]

I forgot to note, I also use these Auth calls:

return Auth.signIn(email, password).then(...)
return Auth.signOut().then(...)
return Auth.signUp({ username: email, password }).then(...)
return Auth.confirmSignUp(email, code).then(...)

[jordanranz]

Hey @jliebrand, to keep backwards compatibility we kept API the same but introduced modules for treeshaking and bundle size. Can you install @aws-amplify/api-rest and try:

import { APIRest } from '@aws-amplify/api-rest'

Then you can use it like:

return APIRest
    .get('my-api', '/endpoint')
    .then(res => console.log(re))

Let me know if this helps.

[jliebrand]

Hi @jordanranz - thanks for that... Just FYI, none of the docs I found mentioned that, and indeed even the blog post announcement about the modularisation says to just do what I did. Probably good to update the docs, or make a dot-oh release that does break backward compatibility?

Anyway, having now tried @aws-amplify/api-rest, that takes my total bundle size down from 462kb to 338kb, so that's a good improvement, but I'm still surprised at the total size. Ultimately all I want is for the auth to do its thing and sign my fetch requests (which is really what the rest api is). I struggle to understand why that would be more than double digits (e.g. 10kb??)

Also: does this mean I should also pull in @aws-amplify/core and /auth instead of the normal amplify package?

[ericclemmons]

@jliebrand You shouldn't have to pull in @aws-amplify/core and @aws-amplify/auth separately.

In my testing a few weeks back with CRA, import { Amplify, Auth } from "aws-amplify" dropped in size significantly:

https://twitter.com/ericclemmons/status/1240784212241846275

It looks like you're using source-map-explorer (https://create-react-app.dev/docs/analyzing-the-bundle-size/). Can you share the output of yarn build so that I can compare to my local sample using Amplify, Auth, and API?

[jliebrand]

@ericclemmons - but are you using '@aws-amplify/api-rest' ? I've just run the build again, and separated out aws in to it's own bundle/chunk.

// aws-bundle.js
import Amplify from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';
import API from '@aws-amplify/api-rest';

export { Amplify, Auth, API };

Then in my redux actions:

export const login = (email, password) => async dispatch => {
  const { Auth } = await import('./aws-bundle');
  return Auth.signIn(email, password)
    .then(......);
};

This results in the following bundle code:

> preact build                                                                                                                                                                                         
                                                                                                                                                                                                       
 Build  [=================== ] 93% (11.8s) after chunk asset optimization                                                                                                                              
                          sw-esm.js ⏤  0 B (-741 B)                                                                                                                                                    
                              sw.js ⏤  0 B (-738 B)                                                                                                                                                    
               0.chunk.31c20.esm.js ⏤  0 B (-69.7 kB)                                                                                                                                                  
                   bundle.2611d.css ⏤  0 B (-39.3 kB)                                                                                                                                                  
                bundle.4f5e1.esm.js ⏤  0 B (-26.8 kB)                                                                                                                                                  
             polyfills.bb680.esm.js ⏤  0 B (-2.01 kB)                                                                                                                                                  
   route-APIKeys.chunk.db212.esm.js ⏤  0 B (-870 B)                                                                                                                                                    
   route-Account.chunk.271a9.esm.js ⏤  0 B (-4.31 kB)                                                                                                                                                  
 route-Dashboard.chunk.d759e.esm.js ⏤  0 B (-236 B)                                                                                                                                                    
  route-Register.chunk.546ff.esm.js ⏤  0 B (-1.03 kB)                                                                                                                                                  
   route-Sandbox.chunk.9cf6c.esm.js ⏤  0 B (-1.13 kB)                                                                                                                                                  
    route-SignIn.chunk.53ba9.esm.js ⏤  0 B (-750 B)                                                                                                                                                    
                   0.chunk.5ee8f.js ⏤  0 B (-69.3 kB)                                                                                                                                                  
                    bundle.69ac1.js ⏤  0 B (-27.1 kB)                                                                                                                                                  
                 polyfills.61f85.js ⏤  0 B (-2.01 kB)                                                                                                                                                  
       route-APIKeys.chunk.3cae9.js ⏤  0 B (-885 B)                                                                                                                                                    
       route-Account.chunk.2af4c.js ⏤  0 B (-4.4 kB)                                                                                                                                                   
     route-Dashboard.chunk.f4336.js ⏤  0 B (-237 B)                                                                                                                                                    
      route-Register.chunk.509cc.js ⏤  0 B (-1.07 kB)                                                                                                                                                  
       route-Sandbox.chunk.47956.js ⏤  0 B (-1.17 kB)                                                                                                                                                  
        route-SignIn.chunk.96810.js ⏤  0 B (-766 B)                                                                                                                                                    
                   0.chunk.*****.js ⏤  70.5 kB (+70.5 kB)                                                                                                                                              
               ssr-bundle.2611d.css ⏤  40.2 kB (+40.2 kB)                                                                                                                                              
                      ssr-bundle.js ⏤  28.6 kB (+28.6 kB)                                                                                                                                              
                                                                                                                                                                                                       
ℹ INFO ⚛️ No custom sw.js detected: compiling default Service Worker.                                                                                                                                   
 Build  [==================  ] 92% (23.6s) additional asset processingRe-using existing @babel/preset-modules configuration.                                                                           
 Build  [=================== ] 93% (26.5s) after chunk asset optimization                                                                                                                              
                   0.chunk.*****.js ⏤  0 B (-70.5 kB)                                                                                                                                                  
               ssr-bundle.2611d.css ⏤  0 B (-40.2 kB)                                                                                                                                                  
                      ssr-bundle.js ⏤  0 B (-28.6 kB)                                                                                                                                                  
                          sw-esm.js ⏤  741 B (+741 B)                                                                                                                                                  
                              sw.js ⏤  738 B (+738 B)                                                                                                                                                  
               0.chunk.31c20.esm.js ⏤  69.7 kB (+69.7 kB)                                                                                                                                              
                   bundle.2611d.css ⏤  39.3 kB (+39.3 kB)
                bundle.4f5e1.esm.js ⏤  26.8 kB (+26.8 kB)
             polyfills.bb680.esm.js ⏤  2.01 kB (+2.01 kB)
   route-APIKeys.chunk.db212.esm.js ⏤  870 B (+870 B)
   route-Account.chunk.271a9.esm.js ⏤  4.31 kB (+4.31 kB)
 route-Dashboard.chunk.d759e.esm.js ⏤  236 B (+236 B)
  route-Register.chunk.546ff.esm.js ⏤  1.03 kB (+1.03 kB)
   route-Sandbox.chunk.9cf6c.esm.js ⏤  1.13 kB (+1.13 kB)
    route-SignIn.chunk.53ba9.esm.js ⏤  750 B (+750 B)
                   0.chunk.5ee8f.js ⏤  69.3 kB (+69.3 kB)
                    bundle.69ac1.js ⏤  27.1 kB (+27.1 kB)
                 polyfills.61f85.js ⏤  2.01 kB (+2.01 kB)
       route-APIKeys.chunk.3cae9.js ⏤  885 B (+885 B)
       route-Account.chunk.2af4c.js ⏤  4.4 kB (+4.4 kB)
     route-Dashboard.chunk.f4336.js ⏤  237 B (+237 B)
      route-Register.chunk.509cc.js ⏤  1.07 kB (+1.07 kB)
       route-Sandbox.chunk.47956.js ⏤  1.17 kB (+1.17 kB)
        route-SignIn.chunk.96810.js ⏤  766 B (+766 B)

⚠ WARN The comment file "0.chunk.31c20.esm.js.LICENSE.txt" conflicts with an existing asset, this may lead to code corruption, please use a different name
⚠ WARN The comment file "bundle.4f5e1.esm.js.LICENSE.txt" conflicts with an existing asset, this may lead to code corruption, please use a different name
⚠ WARN asset size limit: The following asset(s) exceed the recommended size limit (195 KiB).
This can impact web performance.
Assets: 
  0cb5a5c0d251c109458c85c6afeffbaa.svg (699 KiB)
  a0369ea57eb6d3843d6474c035111f29.eot (198 KiB)
  1ab236ed440ee51810c56bd16628aef0.ttf (198 KiB)
  ec763292e583294612f124c0b0def500.svg (876 KiB)
  0.chunk.31c20.esm.js (254 KiB)
  bundle.2611d.css (256 KiB)
  0.chunk.5ee8f.js (255 KiB)
⚠ WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (195 KiB). This can impact web performance.
Entrypoints:
  bundle (420 KiB)
      bundle.2611d.css
      bundle.69ac1.js
      bundle.4f5e1.esm.js

⚠ WARN The comment file "0.chunk.31c20.esm.js.LICENSE.txt" conflicts with an existing asset, this may lead to code corruption, please use a different name
⚠ WARN The comment file "bundle.4f5e1.esm.js.LICENSE.txt" conflicts with an existing asset, this may lead to code corruption, please use a different name
⚠ WARN asset size limit: The following asset(s) exceed the recommended size limit (195 KiB).
This can impact web performance.
Assets: 
  0cb5a5c0d251c109458c85c6afeffbaa.svg (699 KiB)
  a0369ea57eb6d3843d6474c035111f29.eot (198 KiB)
  1ab236ed440ee51810c56bd16628aef0.ttf (198 KiB)
  ec763292e583294612f124c0b0def500.svg (876 KiB)
  0.chunk.31c20.esm.js (254 KiB)
  bundle.2611d.css (256 KiB)
  0.chunk.5ee8f.js (255 KiB)
⚠ WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (195 KiB). This can impact web performance.
Entrypoints:
  bundle (420 KiB)
      bundle.2611d.css
      bundle.69ac1.js
      bundle.4f5e1.esm.js

And the actual size of the bundle:

-rw-r--r--   1 liebrand  staff   254K May 12 10:24 0.chunk.31c20.esm.js                                                                                                                                
-rw-r--r--   1 liebrand  staff    75B May 12 10:24 0.chunk.31c20.esm.js.LICENSE.txt                                                                                                                    
-rw-r--r--   1 liebrand  staff    97B May 12 10:24 0.chunk.31c20.esm.js.map                                                                                                                            
-rw-r--r--   1 liebrand  staff   255K May 12 10:24 0.chunk.5ee8f.js                                                                                                                                    
-rw-r--r--   1 liebrand  staff   1.8K May 12 10:24 0.chunk.5ee8f.js.LICENSE.txt                                                                                                                        
-rw-r--r--   1 liebrand  staff   1.1M May 12 10:24 0.chunk.5ee8f.js.map                                                                                                                                

And the source-map of the bundle:

[ericclemmons]

@jliebrand Thanks for sharing, this is really helpful! It looks like tree-shaking is working correctly (only dependencies for Auth, API, and @aws-amplify/core are showing)

How does this compare with the previous version of the library? If the numbers are roughly the same, then there's something amiss here. If they're favorable, then the opportunity may be in continuing to improve our bundle sizes.

(I'm also curious in the gzip/brotli numbers, since that's what users would see in the wild)

[jliebrand]

It's definitely less than original, since graphql is no longer included. I guess I'm just surprised to have to pull down 250kb just to get auth and api... You can build full on apps for less than that, but I guess it is what it is

(yeah gzipped it'll be less, but i'm just looking at total weight here)

[ericclemmons]

Raw numbers do have some sticker shock. The good news is we're trending in the right direction with tree-shaking:

• https://bundlephobia.com/result?p=@aws-amplify/core (32kB gzipped)
• https://bundlephobia.com/result?p=@aws-amplify/auth (49kB gzipped)

A quick glance at the bundle output points to cross-browser Buffer support and the Auth libraries (e.g. amazon-cognito-identity-js) as the main culprits, but I can't guarantee CognitoUser.js could be rewritten to save that much.

Since it's working, it'd be best for tracking to close this & start a new discussion with how we can cut bundle-size further. If you have suggestions or experience with this, I'd really appreciate your insights on how we can tackle this!

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.