如何减少包含 AWS SDK 的 Vue.js / Nuxt.js 项目的 webpack 包大小？

Question

总结：

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

在这两种情况下，这都很好用，但是当我构建生产版本时，问题就来了。

在这两种情况下，我最终都得到了巨大的包大小（感谢 webpack-bundle-analyzer）我可以立即看到是由 aws-sdk 引起的，它似乎包含实现每个 AWS 服务的代码，在sun，尽管我只导入了 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

在此阶段，该项目将生成有关以下文件过大的控制台警告：

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，由于 hefty：aws-sdk。

aws-sdk 将包括 api: .json 文件和 lib: .js 文件，适用于我能想到的每个 AWS 服务！

整改尝试：

导航至：https://sdk.amazonaws.com/builder/js/
清除所有服务。
Select 只是：AWS.CognitoIdentity
下载"Minified" aws-sdk-.js
下载"Default" 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 文件，用于一堆服务，这些服务实际上并未导入到应用程序中。

最后的分析：

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

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

将 /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"; 目前似乎不允许 tree shaking。

通读了几个相关问题，发现：

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

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

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

就我而言：

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

大大减少了包的大小。这将它降低到 ~57k gz 以使用 S3。

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

如何减少包含 AWS SDK 的 Vue.js / Nuxt.js 项目的 webpack 包大小？

How can I reduce the webpack bundle size for a Vue.js / Nuxt.js project incorporating AWS SDK?

webpack

vue.js

aws-sdk

nuxt.js

aws-amplify

总结：