Angular 17 库构建大小太大（40MB）

Question

我已经制作了一个想要发布的 Angular 17 库，但我注意到我的构建中的一个文件非常大。

我的 dist 文件夹中有一个 fesm2022 目录，其中包含一个超过 38MB 的 .mjs 文件。 我使用了 source-map-explorer，发现该文件包含我的库中的大部分组件，全部占用接近 3.4MB。

有趣的是，有 3 个组件要小得多，但我看不出它们之间有什么区别。

我想知道我是否以某种方式错误地从@angular/core导入了东西，或者我的库配置是否有问题。

以下是其中一个组件的示例，大小为 3.4MB：

import {Component} from '@angular/core';
import {TooltipPosition} from './rainbow-tooltip.enums';
import {NgClass} from '@angular/common';

@Component({
  selector: 'rainbow-tooltip',
  standalone: true,
  imports: [NgClass],
  templateUrl: './rainbow-tooltip.component.html',
  styleUrl: './rainbow-tooltip.component.less'
})
export class RainbowTooltipComponent {
  tooltip = '';
  left = 0;
  top = 0;
  position: TooltipPosition = TooltipPosition.ABOVE;
  visible = false;
  protected readonly TooltipPosition = TooltipPosition;
}

这是其中一个组件的示例，其大小要小得多，为 11KB：

import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
import {IconType, RainbowIconService} from './rainbow-icon.service';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {NgClass} from '@angular/common';

@Component({
  selector: 'rainbow-icon',
  standalone: true,
  imports: [NgClass],
  templateUrl: './rainbow-icon.component.html',
  styleUrl: './rainbow-icon.component.less',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [RainbowIconService]
})
export class RainbowIconComponent {
  @Input() name: IconType;
  @Input() color = 'inherit';
  @Input() size = 24;

  @Output() clicked = new EventEmitter<void>();

  protected get svg(): SafeHtml {
    const svgContent = this.iconService.getSvgForName(this.name);
    return this.sanitizer.bypassSecurityTrustHtml(svgContent);
  }

  constructor(
    private sanitizer: DomSanitizer,
    private iconService: RainbowIconService
  ) {}
}

这是我的库的 package.json：

{
  "name": "@my-org/rainbow-library",
  "version": "0.0.1",
  "main": "fesm2022/my-org-rainbow-library.mjs",
  "module": "fesm2022/my-org-rainbow-library.mjs",
  "es2022": "fesm2022/my-org-rainbow-library.mjs",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng run build-storybook",
    "test": "ng test --no-watch --no-progress",
    "storybook": "ng run storybook"
  },
  "peerDependencies": {
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.10",
    "@angular/core": "^17.3.10"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": false
}

这是

tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/rainbow-library",
    "target": "ES2022",
    "declaration": true,
    "declarationMap": false,
    "sourceMap": false,
    "inlineSources": false,
    "inlineSourceMap": false,
    "emitDeclarationOnly": false,
    "importHelpers": true
  },
  "exclude": [
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "compilationMode": "partial",
    "sourceMap": false
  }
}

还有

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/rainbow-library",
  "lib": {
    "entryFile": "src/public-api.ts",
    "cssUrl": "inline",
    "styleIncludePaths": [
      "src/lib/styles",
      "src/lib/assets/fonts",
      "./lib/assets/"
    ]
  },
  "allowedNonPeerDependencies": ["tslib"],
  "assets": [
    "./src/lib/styles",
    "./src/lib/assets/fonts"
  ]
}

你知道我做错了什么导致 fesm2022 .mjs 文件变得如此之大吗？

感谢您的建议

Answer 1

按照以下步骤操作可能适合您的情况。

    **1.** Delete the dist folder and package-lock.json.

    **2.** Run the command `npm install`

    **3.** Run the command to build library and generate the dist folder again `ng build`