Example spits out a 10.7MB main.bundle.js

[kaihendry]

An npm run build spits out a ~11M build file which is a tad worrying.
https://github.com/aws/amazon-cognito-identity-js/tree/master/examples/babel-webpack

https://twitter.com/slightlylate/status/822632880547500033

[itrestian]

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

[psiho]

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]

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]

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

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.

[kaihendry]

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?