摘要：
我已经使用 Vue.js 和 Nuxt.js 创建了项目，其中安装了 aws-amplify(自动安装 aws-sdk(，以便我可以使用 AWS Cognito 实现身份验证。
在这两种情况下，这都非常有效，但是当我构建生产版本时出现问题。
在这两种情况下，我最终都会得到大量的捆绑包大小(感谢 webpack-bundle-analyzer(，我可以立即看到是由 aws-sdk 引起的，它似乎包含用于在阳光下实现每个 AWS 服务的代码，尽管事实上我只导入 AWS Cognito："Auth"(从"aws-amplify"导入 { Auth }(
我尝试为JavaScript创建自定义的AWS SDK，其中仅包含以下服务：AWS。CognitoIdentity，但尽管合并了它(可能是不正确的(，但在构建项目时，我仍然会得到相同的捆绑包大小(和 aws-sdk 文件(。
正如我所说，这在 Nuxt 和 Vue 项目中都发生了，但为了简化这一点，我现在只想找到使用 Vue 创建的非常基本的示例项目的解决方案。
我想我一定在做一些愚蠢的事情，但我无法弄清楚那是什么。
任何帮助将不胜感激！ ：-(
重现步骤：
- 创建一个基本的 Vue.js 项目，使用默认值。运行：
vue create vue-aws-sdk-inv
[注意：步骤 2 - 4 对于重现问题并不重要，但安装 webpack-bundle-analyzer 提供了有用的额外信息。
- 在新项目中，安装 webpack-bundle-analyzer。运行：
npm install --save-dev webpack-bundle-analyzer - 创建根文件：vue.config.js
- 将以下代码添加到 vue.config.js：
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
- 作为基准，构建项目。运行：
npm run build
在此阶段，项目将构建(没有控制台警告(，webpack-bundle-analyzer 将启动(在浏览器中(显示文件：chunk-vendors。js，在树的顶部，包含一堆其他.js文件，所有文件的大小都可以接受。
- 安装 AWS Amplify(默认情况下为 aws-sdk(。运行：
npm i aws-amplify - 打开 src/components/HelloWorld.vue 并在标签下添加以下内容：
import { Auth } from "aws-amplify"; - 生成项目。运行：
npm run build
在此阶段，项目将生成有关以下文件太大的 WITH 控制台警告：
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
如果安装，webpack-bundle-analyzer 应该启动(在浏览器中(显示一个膨胀的：块供应商。JS，由于一个沉重的：AWS-SDK。
aws-sdk 将包括 API：.json 文件和 lib：我能想到的每个 AWS 服务的 .js 个文件！
试图纠正：
- 导航到：https://sdk.amazonaws.com/builder/js/
- 清除所有服务。
- 仅选择：AWS。认知身份
- 下载"缩小的"aws-sdk-.js
- 下载"默认"aws-sdk-.min.js
[注意：以下是我猜错的步骤?...]
- 在项目中，在node_modules目录中搜索 aws-sdk.js
- 和 aws-sdk.min.js。
它们在/node_modules/aws-sdk/dist 中找到。
- 将这两个文件替换为下载的文件(分别重命名为 aws-sdk.js 和 aws-sdk.min.js。
- 生成项目。运行：
npm run build
项目将像以前一样使用相同的控制台警告和相同的大规模 aws-sdk 进行构建，其中包含一堆实际上未在应用程序中导入的服务的所有相同.js和 .json 文件。
最后的分析：
- 从项目的/node_modules/aws-sdk/dist 中删除 aws-sdk.js 和 aws-sdk.min.js
- 生成项目。运行：
npm run build
项目是在没有引用这些文件的情况下构建的。
- 将/node_modules/aws-sdk 重命名为/node_modules/TEMP_aws-sdk 并尝试构建项目。
构建失败，这证明(我认为(我至少尝试在正确目录中的某个地方添加 aws-sdk 和 aws-sdk.min.js.js 的自定义版本！
源代码：
vue.config.js：
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
src/components/HelloWorld.vue：
import { Auth } from "aws-amplify";
如前所述，任何帮助将不胜感激！ ：-(
根据此问题，看起来import { Auth } from "aws-amplify";目前不允许摇树。
通读几个相关问题，似乎：
import Auth from '@aws-amplify/auth';
是你目前能做的最好的事情。我怀疑随着时间的推移，AWS团队会找到一种方法来更好地分离内部结构。
对于正在寻找减少aws-sdk包捆绑包大小的方法的读者，请参阅文档的此部分。
就我而言：
import S3 from 'aws-sdk/clients/s3';
import AWS from 'aws-sdk/global';
将捆绑包的大小减少了很多。这使得使用S3将其降低到~57k gz。
此外，对于使用nuxt的任何人，您只需运行nuxt build -a即可获取构建分析器。