Amplify-js: Import only parts of amplify?

[jliebrand]

Hi there, I am using amplify inside a react app, where i have code split amplify out in to a chunk like this (pseudo code):

const initFunc = async () {
  const Amplify = await import('aws-amplify');
  Amplify.Auth.configure({..});
}

I only want to use Auth and API but pulling aws-amplify in like this also gives me all the code for storage etc... Is there a way to selectively pull in the various parts? I tried

  const Amplify = await import('aws-amplify/lib/Auth');

But that didn't seem to work?

[mlabieniec]

@jliebrand we are working towards migrating to rollup in order to provide separate bundles so you can do something like this. It's currently in our backlog i don't have a specific date right now.

[fahrradflucht]

@mlabieniec Wouldn't it be possible to get rid of the default class that namespaces all part apis as statics without switching amplifies build system? Because this is what breaks userland tree shaking I suspect...

---

Edit: Sorry just now really read OPs feature request. What I proposed would only solve #701.

[jliebrand]

Hey guys, any update on this?

I still only need Auth and API, but just checking the latest version I'm using (0.4.4) and it's pulling in a whopping 792kb!

[mrchief]

This needs to be prioritized! I'm trying to use auth APIs but I'm also getting Chatbots and stuff - which is extra bad because Chatbot requires me to add babel-polyfill to my site - which is another bloat.

Tree shaking can be supported without moving to rollup. I hope this can be done soon.

[powerful23]

Hey guys we are working on to make the whole library modularized which means you can import only certain module as you want. For now it's in the branch version-1.0.0 as you can have a look and may give us some feedback!

[mrchief]

@powerful23 That's great news. Is it published on npm under some tag? I cannot use github branches as package sources due to corporate policy.

[powerful23]

@mrchief Not yet but we will publish a beta version ASAP

[andersforsell]

Will you publish the modularized library as ES modules (which all modern browsers support)? That would save a lot of time during development by not having to rely on bundlers handling non-standard module formats.

[hotgazpacho]

Hey guys, great progress on modularizing thing! However, still some work to be done. For example, I don't use the GraphQL part of Amplify, but it is being pulled in, along with a HUGE chunk of graphql itself: (v1.0.10)

[mlabieniec]

@hotgazpacho thanks for the feedback. Yes we are aware of this one and are working on this.

[stevemao]

is import Auth from '@aws-amplify/auth'; the recommended way to import only Auth?

[powerful23]

@stevemao yes. In that way you won't import other categories like analytics or storage in your app.

[stevemao]

Thanks @powerful23 , I was hoping that import {Auth} from 'aws-amplify' would tree shake.

[mrchief]

import {Auth} from 'aws-amplify' should be able to shake the tree if the module is sideEffect free. It needs to be marked as such but more importantly, should support that behavior. lodash is a classic example of module that went side effects free.

It's not that import Auth from '@aws-amplify/auth'; is bad, it's just that people would expect import {Auth} from 'aws-amplify' to be able to ree-shake as well and if that isn't the case, it should be called out in the docs or something to spread the awareness, IMO.

[jliebrand]

I'm probably missing something here, but if I do:

import Amplify from '@aws-amplify/core';
Amplify.configure({...});

Things work, but if I do

const Amplify = await import('@aws-amplify/core');
Amplify.configure({...});

It fails with TypeError: Amplify.configure is not a function

?

[powerful23]

@jliebrand can you try Amplify.default.configure()

[jliebrand]

@powerful23 sorry for the delay, been a bit snowed under. Yes that does work, although there are some more gotchas.

1- the configure doesn't do anything, unless you had also loaded the modules that you are trying to configure. This threw me, as I'm using those modules elsewhere and the configure didn't complain. So to get it working properly, you have to do something like this:

  const { default: Amplify } = await import('@aws-amplify/core');
  await import('@aws-amplify/auth');
  await import('@aws-amplify/api');

  Amplify.configure({
    Auth: { .. },
    API: { .. }
  });

Trying to configure modules that are not loaded should probably throw an exception, or at least log a warning to the console?

2- this actually ends up producing bigger chunks for the end user to download. Just pulling in the massive aws-amplify resulted in a chunk with the size 861k. Now that I've split it out in core, auth and api, I end up with three separate modules: 380k, 465k and 242k, totalling 1087k.

Are the individual modules expected to get slimmed down so that this is the correct approach?

[powerful23]

@jliebrand thanks for your advice. Did you check the final bundle size of your app? Those separate modules have some common modules like aws-sdk so the overall size is bigger than aws-amplify, but the bundle size of your app should be smaller. I agree that we should throw the error when trying to configure the unloaded module.

[jliebrand]

Ok, I've combined the modules I need (core, auth and api) in to my own bundle and dynamically load that now. That's brought it down to 600k... still too big for my liking, but better than aws-amplify

[jliebrand]

Any updates on this? Still pulling in way too much for just needing core, api and auth...

[cliffordh]

@jliebrand what tool are you using to generate the javascript breakdown image?

[jliebrand]

@cliffordh source-map-explorer (https://www.npmjs.com/package/source-map-explorer)

[Pwntus]

@aws-amplify/api will automatically include graphql whether or not API uses GraphQL client/server.

This currently adds 176.63 KB (42.93 KB gzipped) to my bundle.

[roborourke]

Are there any plans to create targeted bundles? eg. web / node / isomorphic? That might help to reduce bundle sizes too but I know that's a huge undertaking.

[OndeVai]

I just noticed the huge graphql bundle as well. This should really be fixed. Amazon has the coin to do it :)

[diosney]

Hi, any updates on this?

I'm already stripping @amplify/api dependency due this issue, .... , and how happy I was when find out that using amplify I would remove a lot of several external modules to use only one for logging, i18n, api queries, and so on.

[DaleMatthews]

Currently, aws-amplify is a whopping 2/3rds of my web app bundle size. I'd love to see graphql out of my bundle, and clear documentation for importing modules a la carte like @jliebrand is attempting above

[cor1]

So i spent some time today trying to remove graphql since I dont use it. A workaround that is working for me is I used craco to modify the webpack config without ejecting create react app to ignore graphql, and my build doesnt include the dependency anymore.

here is my craco.config.js
module.exports = { webpack: { configure: { externals: { graphql: { commonjs: 'graphql' } } } } };

@DaleMatthews @diosney @OndeVai

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[antonsamper]

This is still a valid issue. @manueliglesias how is this progressing??

[jliebrand]

friendly ping...

[powerful23]

@antonsamper @jliebrand about the library bundle size please check the RFC: https://github.com/aws-amplify/amplify-js/issues/3365

[antonsamper]

@powerful23 thanks, will keep a close eye on it

[sammartinez]

@jliebrand I have referenced this issue to the overall RFC that we are currently working on.

[jliebrand]

@sammartinez thanks! Any guestimate when the preview work will be rolled up into the master release?

[ItayKatzCC]

Any updates?

[luchoman08]

In our case in a Vue project (we only use the auth sub package) using

import Auth from '@aws-amplify/auth'
Auth.configure({...})

reduced the build size ~2.3MB

Before:

After:

[seanaye]

@luchoman08
This doesn't work for me using aws-amplify-vue. Could you provide your full config please?

Here's mine

import Auth from '@aws-amplify/auth'
import API from '@aws-amplify/api'
import { AmplifyPlugin } from 'aws-amplify-vue'
Amplify.configure({...})
Vue.use(AmplifyPlugin, { Auth, API })

[luchoman08]

@luchoman08
This doesn't work for me using aws-amplify-vue. Could you provide your full config please?

Here's mine

import Auth from '@aws-amplify/auth'
import API from '@aws-amplify/api'
import { AmplifyPlugin } from 'aws-amplify-vue'
Amplify.configure({...})
Vue.use(AmplifyPlugin, { Auth, API })

maybe should be

import Auth from '@aws-amplify/auth'
import API from '@aws-amplify/api'
import { AmplifyPlugin } from 'aws-amplify-vue'
Auth.configure({...})
Vue.use(AmplifyPlugin, { Auth, API })

[Amplifiyer]

This has been closed with https://github.com/aws-amplify/amplify-js/pull/5243 that implemented tree shaking and modular imports.