title: How can I reduce the webpack bundle size for a Vue.js / Nuxt.js project incorporating AWS SDK?
body: <h1>Summary:</h1>
  
  <p>I have created projects, with Vue.js and Nuxt.js, where I have installed aws-amplify (which automatically installs aws-sdk) in order that I can implement authentication with AWS Cognito.</p>
  
  <p>In both cases, this works very nicely, but the problems come when I build production versions.</p>
  
  <p>In both cases, I end up with massive bundle sizes which (thanks to webpack-bundle-analyzer) I can immediately see are caused by the aws-sdk  which appears to contain code to implement every AWS service, under the sun, despite the fact that I am only importing AWS Cognito's: "Auth" (import { Auth } from 'aws-amplify')</p>
  
  <p>I have tried creating a custom AWS SDK for JavaScript, which only includes the service: AWS.CognitoIdentity, but despite incorporating that (presumably incorrectly), I still end up with the same bundle size (and aws-sdk files) when I build the projects.</p>
  
  <p>As I say, this is happening in both Nuxt and Vue project, but in order to simplify this, I for now just want to find the solution to a very basic sample project created with Vue.</p>
  
  <p>I think I must be doing something dumb, but I can't work out what that is.</p>
  
  <p>Any help would be greatly appreciated! :-)</p>
  
  <h1>Steps to reproduce:</h1>
  
  <ol>
  <li>Create a basic Vue.js project with defaults. Run: <code>vue create vue-aws-sdk-inv</code></li>
  </ol>
  
  <p>[Note: Steps 2 - 4, are not crucial to reproduce issue, but install webpack-bundle-analyzer which provides useful extra info.]</p>
  
  <ol start="2">
  <li>In the new project, install webpack-bundle-analyzer. Run: <code>npm install --save-dev webpack-bundle-analyzer</code></li>
  <li>Create root file: vue.config.js</li>
  <li>Add the following code to vue.config.js:</li>
  </ol>
  
  <pre><code>const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
  module.exports = {
    configureWebpack: {
      plugins: [new BundleAnalyzerPlugin()]
    }
  };
  </code></pre>
  
  <ol start="5">
  <li>As a benchmark, build the project. Run: <code>npm run build</code></li>
  </ol>
  
  <p>At this stage, the project will build (with no console warnings) and webpack-bundle-analyzer will launch (in the browser) showing the file: chunk-vendors..js, at the top of the tree, containing a bunch of other .js files, all of acceptable size.</p>
  
  <ol start="6">
  <li>Install AWS Amplify (and by default aws-sdk). Run: <code>npm i aws-amplify</code></li>
  <li>Open src/components/HelloWorld.vue and add the following under the  tag: <code>import { Auth } from "aws-amplify";</code></li>
  <li>Build the project. Run: <code>npm run build</code></li>
  </ol>
  
  <p>At this stage, the project will build WITH console warnings regarding the following files being too large:</p>
  
  <pre><code>File                                 Size               Gzipped
  
  dist/js/chunk-vendors.013ac3f0.js    3055.78 KiB        550.49 KiB
  dist/js/app.fa2a21c4.js              4.67 KiB           1.67 KiB
  dist/css/app.53019c4c.css            0.33 KiB           0.23 KiB
  </code></pre>
  
  <p>If installed, webpack-bundle-analyzer should launch (in the browser) showing an inflated: chunk-vendors..js, due to a hefty: aws-sdk.</p>
  
  <p>aws-sdk will include api: .json files and lib: .js files for every AWS service I can think of!</p>
  
  <h1>The attempt to rectify:</h1>
  
  <ol>
  <li>Navigate to: <a href="https://sdk.amazonaws.com/builder/js/" rel="nofollow noreferrer">https://sdk.amazonaws.com/builder/js/</a></li>
  <li>Clear all services.</li>
  <li>Select just: AWS.CognitoIdentity</li>
  <li>Download "Minified" aws-sdk-.js</li>
  <li>Download "Default" aws-sdk-.min.js</li>
  </ol>
  
  <p>[Note: the following are the steps I am guessing I'm getting wrong?...]</p>
  
  <ol start="6">
  <li>In the project, search the node_modules directory for aws-sdk.js and aws-sdk.min.js.</li>
  </ol>
  
  <p>They were found in /node_modules/aws-sdk/dist</p>
  
  <ol start="7">
  <li>Replace both files with the downloaded files (renaming to aws-sdk.js and aws-sdk.min.js respectively.)</li>
  <li>Build the project. Run: <code>npm run build</code></li>
  </ol>
  
  <p>Project will build with same console warnings and same massive aws-sdk, as before, containing all the same .js and .json files for a bunch of services that are not actually imported in the application.</p>
  
  <h1>Final pieces of analysis:</h1>
  
  <ol>
  <li>Remove aws-sdk.js and aws-sdk.min.js from project's: /node_modules/aws-sdk/dist</li>
  <li>Build the project. Run: <code>npm run build</code></li>
  </ol>
  
  <p>Project is built without even referencing these files.</p>
  
  <ol start="3">
  <li>Rename /node_modules/aws-sdk to /node_modules/TEMP_aws-sdk and attempt to build the project.</li>
  </ol>
  
  <p>Build fails, and this proves (I think) that I was at least trying to add the custom versions, of aws-sdk.js and aws-sdk.min.js, somewhere in the correct directory!</p>
  
  <h1>Source Code:</h1>
  
  <h2>vue.config.js:</h2>
  
  <pre><code>const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
  module.exports = {
    configureWebpack: {
      plugins: [new BundleAnalyzerPlugin()]
    }
  };
  </code></pre>
  
  <h2>src/components/HelloWorld.vue:</h2>
  
  <pre><code>import { Auth } from "aws-amplify";
  </code></pre>
  
  <p>As said before, any help would be greatly appreciated! :-)</p>