如何减少包含 AWS 开发工具包的 Vue.js / Nuxt.js 项目的 webpack 包大小？

Question

总结：

我使用 Vue.js 和 Nuxt.js 创建了项目，我在其中安装了 aws-amplify（它会自动安装 aws-sdk），以便我可以使用 AWS Cognito 实施身份验证。

在这两种情况下，这都非常有效，但是当我构建生产版本时问题就来了。

在这两种情况下，我都会得到大量的捆绑包（感谢 webpack-bundle-analyzer），我可以立即看到这是由 aws-sdk 引起的，它似乎包含在阳光下实现每个 AWS 服务的代码，尽管我只导入 AWS Cognito 的："Auth" (import { Auth } from 'aws-amplify')

我尝试为 JavaScript 创建一个自定义 AWS 开发工具包，其中仅包含以下服务：AWS.CognitoIdentity，但尽管合并了它（可能是错误的），但我仍然得到相同的包大小（和 aws-sdk 文件）我构建项目。

正如我所说，这在 Nuxt 和 Vue 项目中都会发生，但为了简化这一点，我现在只想找到一个使用 Vue 创建的非常基本的示例项目的解决方案。

我想我一定是在做一些愚蠢的事情，但我不知道那是什么。

任何帮助将不胜感激！ :-)

重现步骤：

1. 使用默认值创建一个基本的 Vue.js 项目。运行：vue create vue-aws-sdk-inv

[注意：步骤 2 - 4，对于重现问题并不重要，但安装 webpack-bundle-analyzer 可以提供有用的额外信息。]

1. 在新项目中，安装 webpack-bundle-analyzer。运行：npm install --save-dev webpack-bundle-analyzer
2. 创建根文件：vue.config.js
3. 在 vue.config.js 中添加如下代码：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};

5. 作为基准，构建项目。运行：npm run build

在这个阶段，项目将构建（没有控制台警告）并且 webpack-bundle-analyzer 将启动（在浏览器中）显示文件：chunk-vendors..js，在树的顶部，包含一个一堆其他 .js 文件，大小都可以接受。

6. 安装 AWS Amplify（默认为 aws-sdk）。运行：npm i aws-amplify
7. 打开 src/components/HelloWorld.vue 并在标签下添加以下内容：import { Auth } from "aws-amplify";
8. 构建项目。运行：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 应该会启动（在浏览器中）显示一个膨胀的：chunk-vendors..js，因为它有一个庞大的：aws-sdk。

aws-sdk 将为我能想到的每个 AWS 服务包含 api: .json 文件和 lib: .js 文件！

尝试纠正：

1. 导航到：https://sdk.amazonaws.com/builder/js/
2. 清除所有服务。
3. 仅选择：AWS.CognitoIdentity
4. 下载“缩小版”aws-sdk-.js
5. 下载“默认”aws-sdk-.min.js

[注意：以下是我猜我弄错的步骤？...]

6. 在项目中，在 node_modules 目录中搜索 aws-sdk.js 和 aws-sdk.min.js。

它们位于 /node_modules/aws-sdk/dist

1. 用下载的文件替换这两个文件（分别重命名为 aws-sdk.js 和 aws-sdk.min.js。）
2. 构建项目。运行：npm run build

项目将像以前一样使用相同的控制台警告和相同的大型 aws-sdk 构建，其中包含所有未在应用程序中实际导入的服务的所有相同 .js 和 .json 文件。

最后的分析：

1. 从项目的 /node_modules/aws-sdk/dist 中删除 aws-sdk.js 和 aws-sdk.min.js
2. 构建项目。运行：npm run build

项目的构建甚至没有引用这些文件。

1. 将 /node_modules/aws-sdk 重命名为 /node_modules/TEMP_aws-sdk 并尝试构建项目。

构建失败，这证明（我认为）我至少尝试在正确目录的某处添加自定义版本的 aws-sdk.js 和 aws-sdk.min.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";

如前所述，我们将不胜感激任何帮助！ :-)

Answer 1

根据this issue，看起来import { Auth } from "aws-amplify"; 目前不允许摇树。

通读几个相关问题，看来：

import Auth from '@aws-amplify/auth';

是你目前能做的最好的。我怀疑随着时间的推移，AWS 团队会找到一种更好地分离内部的方法。

对于正在寻找减少 aws-sdk 包大小的方法的读者，请参阅文档的 this section。

就我而言：

import S3 from 'aws-sdk/clients/s3';
import AWS from 'aws-sdk/global';

大大减少了捆绑包的大小。使用 S3 可以将其降低到 ~57k gz。

---

此外，对于使用 nuxt 的任何人，您只需运行 nuxt build -a 即可获取构建分析器。