时间戳

首页 > 解决方案 > AWS 放大缩小捆绑包大小

angular - AWS 放大缩小捆绑包大小

问题描述

描述错误 我们正在尝试通过将 aws-amplify 包重构为其模块化组件来减小包大小。一切正常，直到我们aws-amplify 在最后一步删除包并添加@aws-amplify/api-graphql 包。

重现 为了减少庞大的包大小，我们将重构为从 aws-amplify 包中的模块化导入。作为原始依赖，我们有：

"aws-appsync": "^4.0.1",
"aws-amplify": "^3.3.18",

我可以将其重构为：

"@aws-amplify/analytics": "^3.2.5",
"@aws-amplify/api": "^3.2.24",
"@aws-amplify/auth": "^3.3.3",
"@aws-amplify/storage": "^3.3.24",

删除包aws-amplify 并将其替换为：@aws-amplify/api-graphql 由于 API 的模块化依赖调用 API 服务中的以下导入签名已更改：

import API, { graphqlOperation, GraphQLResult } from "aws-amplify";

至

import API, { graphqlOperation, GraphQLResult } from "@aws-amplify/api-graphql";

预期行为 Angular 应用程序继续工作

代码片段

"dependencies": {
        "@angular/animations": "^10.1.0",
        "@angular/cdk": "^10.2.7",
        "@angular/common": "^10.1.0",
        "@angular/compiler": "^10.1.0",
        "@angular/core": "^10.1.0",
        "@angular/forms": "^10.1.0",
        "@angular/material": "^10.2.7",
        "@angular/platform-browser": "^10.1.0",
        "@angular/platform-browser-dynamic": "^10.1.0",
        "@angular/router": "^10.1.0",
        "@angular/service-worker": "^10.1.0",
        "@aws-amplify/analytics": "^3.2.5",
        "@aws-amplify/api": "^3.2.24",
        "@aws-amplify/api-graphql": "^1.2.24",
        "@aws-amplify/auth": "^3.3.3",
        "@aws-amplify/storage": "^3.3.24",
        "@ngx-translate/core": "^13.0.0",
        "@ngx-translate/http-loader": "^6.0.0",
        "@nrwl/angular": "10.4.4",
        "@tensorflow-models/posenet": "^2.2.1",
        "@tensorflow/tfjs-backend-webgl": "^3.2.0",
        "@tensorflow/tfjs-converter": "^2.8.0",
        "@tensorflow/tfjs-core": "^2.8.0",
        "aws-appsync": "^4.0.1",
        "chart.js": "^2.9.4",
        "crypto-js": "^4.0.0",
        "graphql": "^15.5.0",
        "idb": "^6.0.0",
        "ng2-charts": "^2.4.2",
        "rxjs": "~6.5.5",
        "typed-graphql": "^1.0.2",
        "webpack-bundle-analyzer": "^4.4.0",
        "zone.js": "^0.10.2"
    },

应用程序从 AWS 调用 GraphQL API 时的 屏幕截图错误图片

什么是配置？

const awsmobile = {
    "aws_project_region": "XX-XXXX-X",
    "aws_cognito_identity_pool_id": "XXXXXXXXXXXXXXXXXXXXX",
    "aws_cognito_region": "XX-XXXX-X",
    "aws_user_pools_id": "XX-XXXX-X_XXXX",
    "aws_user_pools_web_client_id": "XXXXX",
    "oauth": {},
    "aws_mobile_analytics_app_id": "XXXX",
    "aws_mobile_analytics_app_region": "XX-XXXX-X",
    "aws_user_files_s3_bucket": "X-staging",
    "aws_user_files_s3_bucket_region": "XX-XXXX-X",
    "aws_appsync_graphqlEndpoint": "https://XXXXXXXX/graphql",
    "aws_appsync_region": "XX-XXXX-X",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS"
}

环境

System:
    OS: macOS 11.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 158.36 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.1/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.3
  npmPackages:
    @angular-devkit/build-angular: ~0.1001.3 => 0.1001.7 
    @angular/animations: ^10.1.0 => 10.2.3 
    @angular/cdk: ^10.2.7 => 10.2.7 
    @angular/cli: ~10.1.3 => 10.1.7 
    @angular/common: ^10.1.0 => 10.2.3 
    @angular/compiler: ^10.1.0 => 10.2.3 
    @angular/compiler-cli: ^10.1.0 => 10.2.3 
    @angular/core: ^10.1.0 => 10.2.3 
    @angular/forms: ^10.1.0 => 10.2.3 
    @angular/language-service: ^10.1.0 => 10.2.3 
    @angular/material: ^10.2.7 => 10.2.7 
    @angular/platform-browser: ^10.1.0 => 10.2.3 
    @angular/platform-browser-dynamic: ^10.1.0 => 10.2.3 
    @angular/router: ^10.1.0 => 10.2.3 
    @angular/service-worker: ^10.1.0 => 10.2.3 
    @aws-amplify/analytics: ^3.2.5 => 3.2.5 
    @aws-amplify/api: ^3.2.24 => 3.2.24 
    @aws-amplify/api-graphql: ^1.2.24 => 1.2.24 
    @aws-amplify/auth: ^3.3.3 => 3.3.3 
    @aws-amplify/storage: ^3.3.24 => 3.3.24 
    @ngneat/spectator: ^6.1.2 => 6.1.2 
    @ngx-translate/core: ^13.0.0 => 13.0.0 
    @ngx-translate/http-loader: ^6.0.0 => 6.0.0 
    @nrwl/angular: 10.4.4 => 10.4.4 
    @nrwl/cli: 10.4.4 => 10.4.4 
    @nrwl/cypress: 10.4.4 => 10.4.4 
    @nrwl/eslint-plugin-nx: 10.4.4 => 10.4.4 
    @nrwl/jest: 10.4.4 => 10.4.4 
    @nrwl/tao: 10.4.4 => 10.4.4 
    @nrwl/workspace: 10.4.4 => 10.4.4 
    @tensorflow-models/posenet: ^2.2.1 => 2.2.1 
    @tensorflow/tfjs-backend-webgl: ^3.2.0 => 3.2.0 
    @tensorflow/tfjs-converter: ^2.8.0 => 2.8.6 
    @tensorflow/tfjs-core: ^2.8.0 => 2.8.6 
    @types/jest: 26.0.8 => 26.0.8 
    @types/node: ~8.9.4 => 8.9.5 
    @typescript-eslint/eslint-plugin: 4.3.0 => 4.3.0 
    @typescript-eslint/parser: 4.3.0 => 4.3.0 
    aws-appsync: ^4.0.1 => 4.0.1 
    chart.js: ^2.9.4 => 2.9.4 
    codelyzer: ~5.0.1 => 5.0.1 
    crypto-js: ^4.0.0 => 4.0.0 
    cypress: ^6.1.0 => 6.1.0 
    cypress-cucumber-preprocessor: ^4.0.0 => 4.0.0 
    eslint: 7.10.0 => 7.10.0 
    eslint-config-prettier: 6.0.0 => 6.0.0 
    eslint-plugin-cypress: ^2.10.3 => 2.11.2 
    fake-indexeddb: ^3.1.2 => 3.1.2 
    faker: ^5.1.0 => 5.1.0 
    graphql: ^15.5.0 => 15.5.0 
    idb: ^6.0.0 => 6.0.0 
    jest: 26.2.2 => 26.2.2 
    jest-preset-angular: 8.3.1 => 8.3.1 
    ng2-charts: ^2.4.2 => 2.4.2 
    prettier: 2.1.2 => 2.1.2 
    rxjs: ~6.5.5 => 6.5.5 
    ts-jest: 26.4.0 => 26.4.0 
    ts-node: ~7.0.0 => 7.0.1 
    tslint: ~6.0.0 => 6.0.0 
    typed-graphql: ^1.0.2 => 1.0.2 
    typescript: ~4.0.3 => 4.0.5 
    webpack-bundle-analyzer: ^4.4.0 => 4.4.0 
    zone.js: ^0.10.2 => 0.10.3 
  npmGlobalPackages:
    @angular/cli: 11.0.2
    amplify: 0.0.11
    cross-env: 7.0.3
    firebase-tools: 8.16.2
    gitex-flow: 2.2.1
    http-server: 0.12.3
    jshint: 2.12.0
    npm: 6.14.10
    stencil: 0.0.5
    typescript: 4.1.2
    yarn: 1.22.10

标签： angularwebpackaws-amplify

解决方案

以防万一有人面临同样的问题：

看来您必须使用 ./src/aws-exports.js 文件配置放大，这需要适当的模块。

根据文档（请在此处找到）：

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

相反，您可以尝试第一行...

import Amplify from '@aws-amplify/core';

...这需要另一个依赖项

推荐阅读