Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import only parts of amplify? #488

Closed
jliebrand opened this issue Mar 21, 2018 · 41 comments
Closed

Import only parts of amplify? #488

jliebrand opened this issue Mar 21, 2018 · 41 comments
Assignees
Labels
Build Related to build issues feature-request Request a new feature

Comments

@jliebrand
Copy link

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
Copy link
Contributor

@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.

@mlabieniec mlabieniec added feature-request Request a new feature Build Related to build issues labels Apr 13, 2018
@mlabieniec mlabieniec added this to the [email protected] milestone Apr 13, 2018
@fahrradflucht
Copy link

fahrradflucht commented May 5, 2018

@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
Copy link
Author

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!

image

@mrchief
Copy link

mrchief commented Jun 29, 2018

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
Copy link
Contributor

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
Copy link

mrchief commented Jun 29, 2018

@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
Copy link
Contributor

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

@mlabieniec mlabieniec removed this from the [email protected] milestone Jul 19, 2018
@andersforsell
Copy link

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
Copy link

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)

image

@mlabieniec
Copy link
Contributor

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

@stevemao
Copy link

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

@powerful23
Copy link
Contributor

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

@stevemao
Copy link

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

@mrchief
Copy link

mrchief commented Sep 29, 2018

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
Copy link
Author

jliebrand commented Oct 5, 2018

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
Copy link
Contributor

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

@jliebrand
Copy link
Author

jliebrand commented Oct 24, 2018

@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
Copy link
Contributor

@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
Copy link
Author

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
Copy link
Author

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

image

@cliffordh
Copy link

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

@jliebrand
Copy link
Author

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

@Pwntus
Copy link
Contributor

Pwntus commented Jan 10, 2019

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

aws-amplify-gql
This currently adds 176.63 KB (42.93 KB gzipped) to my bundle.

@roborourke
Copy link

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
Copy link

OndeVai commented Jan 22, 2019

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

@diosney
Copy link

diosney commented Feb 10, 2019

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
Copy link

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
Copy link

cor1 commented Mar 29, 2019

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
Copy link

stale bot commented Jun 15, 2019

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
Copy link

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

@jliebrand
Copy link
Author

jliebrand commented Jun 26, 2019

friendly ping...

@powerful23
Copy link
Contributor

@antonsamper @jliebrand about the library bundle size please check the RFC: #3365

@antonsamper
Copy link

@powerful23 thanks, will keep a close eye on it

@sammartinez
Copy link
Contributor

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

@jliebrand
Copy link
Author

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

@ItayKatzCC
Copy link

Any updates?

@luchoman08
Copy link

luchoman08 commented Feb 19, 2020

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:
image

After:
image

@seanaye
Copy link

seanaye commented Mar 22, 2020

@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
Copy link

luchoman08 commented Mar 24, 2020

@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
Copy link
Contributor

This has been closed with #5243 that implemented tree shaking and modular imports.

@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 11, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Build Related to build issues feature-request Request a new feature
Projects
None yet
Development

No branches or pull requests