vue使用aws-sdk上传，npm后，编译会很大，造成页面卡顿怎么优化呢？

Question

import AWS from 'aws-sdk';
         const s3 = new AWS.S3({
                   endpoint: 'http://' + endpoint,
                accessKeyId: accessKeyId,
                secretAccessKey: secretAccessKey,
                s3ForcePathStyle: true,
                signatureVersion: 'v4'
              });
              s3.getSignedUrl('getObject', params, (err, url) => {
                let parts = url.match('(http://.*)(/iaas-image/.*)');
                let address;
                address = window.location.protocol + '//' + window.location.host + parts[2];

                if (err) {
                  console.error('无法生成镜像文件：', err);
                } else {
                  // 使用生成的URL下载图片
                  window.open(address);
                }
              });
            })

我是正常的使用下载，但是编译出来会有1.7M，不使用时只有170kb
import AWS from 'aws-sdk';
引入后👇

//import AWS from 'aws-sdk';
注掉后👇

咨询下大佬，这个该怎么去优化呢，我应该怎么处理呢？拜谢！

Answer 1

1、可以使用v3版本，可以只引入你真正需要的 AWS 服务模块，而不是整个 SDK
安装：npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner @aws-sdk/util-create-request @aws-sdk/credential-provider-node

// v3 中的导入方式
import { S3, GetObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

// 创建 S3 客户端实例
const s3 = new S3({
  endpoint: 'http://' + endpoint,
  credentials: {
    accessKeyId: accessKeyId,
    secretAccessKey: secretAccessKey,
  },
  forcePathStyle: true,
  signatureVersion: 'v4'
});

// 获取预签名 URL
async function fetchSignedUrl() {
  try {
    const command = new GetObjectCommand(params);
    const signedUrl = await getSignedUrl(s3, command);

    let parts = signedUrl.match('(http://.*)(/iaas-image/.*)');
    let address;
    address = window.location.protocol + '//' + window.location.host + parts[2];

    // 使用生成的URL下载图片
    window.open(address);
  } catch (err) {
    console.error('无法生成镜像文件：', err);
  }
}

fetchSignedUrl();

2、使用vue异步组件功能引入组件，只在需要时才被加载，对于一个使用 aws-sdk 的组件：

const AwsComponent = () => import('./AwsComponent.vue');

Answer 2

首先肯定要减少主文件大小，这可以把aws-sdk拆分出去，单独打包。看你用的什么打包工具，配置对应的webpack或vite。

其次也需要减小aws-sdk包的大小，因为aws-sdk本身也很大，你应该没有用到aws-sdk所有模块，用到哪些模块引入哪些模块，另外，如果你不需要在初始化的时候就加载aws-sdk，可以懒加载aws-sdk

let importS3 = () => import('aws-sdk/clients/s3');

importS3().then(S3 => {
  const s3 = new S3();
  // ...
});