UI Components always bundle storage, even if it is not used

[atyshka]

Describe the bug Any use of the ui components necessitates the inclusion of the storage api, which takes up a whole megabyte. For those of us who do not use storage components but only things like auth components, this is a massive waste. 20% of my app bundle is now this storage api which I am not using.

To Reproduce Steps to reproduce the behavior:

Import either the whole component library via import "@aws-amplify/ui-vue"; or modularly by

import {
  AmplifyAuthenticator,
  AmplifySignIn,
} from "@aws-amplify/ui-vue";

Expected behavior The modular import, including only the authenticator and sign in, would not bundle the s3 storage dependency.

Code Snippet Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

import {
  AmplifyAuthenticator,
  AmplifySignIn,
} from "@aws-amplify/ui-vue";

Screenshots

The blue block on the right is the unnecessary inclusion of s3, comprising ~20% of the bundle size

[ericclemmons]

@atyshka You're absolutely right. Normally named imports like you gave above would tree-shake out unused modules. But the @aws-amplify/ui-components are built by StencilJS, resulting in a single bundle.

It'll take some research to see if we can make it tree-shakeable in a backwards compatible way. One alternative is to use dist-custom-elements-bundle, which should result in single bundles per-component, but has its own trade-offs. @wlee221 Have you looked into this as wel?

[wlee221]

I have not, but I should! This is related to discussions we had for aws-amplify/amplify-js#6802 as well. I was under the impression that bundles generated with dist should be tree shakable based on their docs. This is definitely worth investigating. @atyshka, can you share your package.json?

[wlee221]

On the other hand, named imports aren't available ui-vue. You just need import "@aws-amplify/ui-vue" which would define the components (docs). Your code should complain export 'AmplifyAuthenticator' was not found in '@aws-amplify/ui-vue', right?

[atyshka]

@wlee221 No, actually for some reason I do not; I see no errors in the compiler output nor the runtime console and the components appear correctly on screen.

[jamessouth]

Here's my bundle analysis from a React project. This is after going from this, in the React docs:

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

to this, adapted from the JS docs:

import Amplify from "@aws-amplify/auth";
import awsExports from "../aws-exports";
Amplify.configure(awsExports);

which seems to work the same but reduced the size of the dev mode vendor bundle from 31 to 11 megs! Prod mode from 1.2 to 1.02, parsed size! The bundle includes apparently extraneous modules like client-s3, client-lex-runtime, amplify-chatbot-entry, and 7 instances of bn.js.

[atyshka]

@jamessouth Yes modular imports improve things in your case, but this issue is unrelated. This refers specifically to modular imports for UI components from StencilJS. As you can see, modular imports work just fine for other modules such as authentication.

[ericclemmons]

We'll be testing out 729657353212d408a415301bdd0a802937c4ec04 & e8e0c8421ab1085d7615350e91e70db670b45f25 to see if that helps resolve usage with @aws-amplify/ui-components directly 🙏

[atyshka]

@ericclemmons running latest release and seems to still be an issue, can you reproduce as well?

[atyshka]

It seems that e8e0c84 was merged but 7296573 was not?

[Milan-Shah]

@atyshka We have released a newer version of @aws-amplify/ui-vue@2.x.x. We no longer use Stencil and instead leverage Vue directly, so storage should now be tree-shakable. Please let us know if you have any issues!