This repository has been archived by the owner. It is now read-only.

Example spits out a 10.7MB main.bundle.js #255

Closed
kaihendry opened this Issue Jan 23, 2017 · 6 comments

Comments

Projects
None yet
4 participants
@itrestian

This comment has been minimized.

Copy link
Contributor

itrestian commented Jan 27, 2017

Agree that that is a concern. Does that end up including the whole aws sdk or only the cognito identity service provider client?

@psiho

This comment has been minimized.

Copy link

psiho commented Feb 7, 2017

I've spent an hour following different ways to configure webpack and AWS Cognito and I'm just about to give up and put it into SCRIPT tag like most others. I don't get it, it does work, just like this example, but produces huge bundle like you noticed.

I use only Cognito Pool, so don't need fulls SDK. Importing amazon-cognito-identity-js increases my bundle for 600KB. thats more than all my libraries together (590 KB). But minified files included through script tag in html, all 5 of them including jsbn, sjcl,... 357 Kb.
So how come that webpacked method increses boundle size for double that amount?

@sbussard

This comment has been minimized.

Copy link
Contributor

sbussard commented Feb 7, 2017

I think the issue should likely be reported here:
https://github.com/aws/aws-sdk-js/issues

My 2¢:

  • use webpack 2 with tree shaking
  • don't import all of aws-sdk, just import the pieces you need.

for example, just import this for s3.
aws-sdk/global
aws-sdk/clients/s3

Build using webpack -p and set the node environment to "production".
Search the web for "webpack in production", there are many optimizations you'll want to look at.

Finally, use this tool to find out where all your megabytes are coming from:
https://chrisbateman.github.io/webpack-visualizer

@psiho

This comment has been minimized.

Copy link

psiho commented Feb 7, 2017

@sbussard Im using webpack2 and am aware of tree shaking. That's why I migrated. I'm using -p and separate production config which is ok and working for many other modules quite well. My only issue is cognito. I am new to this so it takes time to get arround but for sure it does not work well "out of the box" nor following official AWS docs, not even this example. Bundle is just huge and it's not a small issue.

I don't know how to import only what I need from aws-sdk. I need only cognito, not connecting to S3 or anything. I thought the whole point of aws-cognito-sdk was that it is stripped down version of aws-sdk for projects like mine where you only use Cognito pool. Logical step was to npm install amazon-cognito-identity-js and hope it will deal with everything else. But as soon as i do import {CognitoUserPool,CognitoUserAttribute} from "amazon-cognito-identity-js" bundle increses for 600 kb. Investigating further I think amazon-cognito-identity-js uses full aws-sdk dependency. So yes, my thought too was that somehow I need to limit what is used from aws-sdk, or even better somehow link it to 'aws-cognito-sdk' instead but I failed to find example how to do it. I'll just need to spend more time learning webpack to get arround this but I'm not sure it is worth it.

webpack-visualizer is a great find, really usefull!

@itrestian

This comment has been minimized.

Copy link
Contributor

itrestian commented Feb 8, 2017

Basically this is the way you build only the necessary clients for the AWS SDK

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/building-sdk-for-browsers.html

node dist-tools/browser-builder.js

and specify the services you want to include.

Note also that we have a couple of pull requests that we are in the process of integrating to remove some of the dependencies that will reduce the bundle size.

@itrestian itrestian closed this Apr 3, 2017

@kaihendry

This comment has been minimized.

Copy link
Author

kaihendry commented Sep 8, 2017

If you are not going to fix your Webpack sample, why don't you at the very least source the browser-builder.js built JS?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.