Angular 17类库构建体积过大（40MB）问题排查求助

1. 检查@angular/core导入规范 #

• 禁止全量导入@angular/core（如import * as core from '@angular/core'），这类写法会把整个核心库打包进产物，必须改为按需导入，例如import { Component, Input, OnInit } from '@angular/core'
• 排查组件中是否导入了测试相关API（如TestBed、fakeAsync），此类代码不应出现在生产类库中，需移除或通过条件编译隔离

2. 定位两类组件的体积差异 #

对比3.4MB和11KB组件的核心差异点：

• 模板内容：大体积组件是否包含内联大资源（如base64格式的图片、超长静态HTML结构），Angular会将内联模板编译进最终产物
• 依赖链路：检查大体积组件是否导入了未按需加载的第三方库/内部模块（例如直接导入@angular/material而非单个组件模块）
• 装饰器配置：确认大体积组件是否开启了preserveWhitespaces: true（默认关闭），该配置会保留模板空白字符增加体积；同时核查是否存在大量未使用的@Input()/@Output()定义
• 循环依赖：排查大体积组件是否与其他模块形成循环依赖，导致打包时重复注入代码

3. 核查类库配置文件 #

package.json #

• 确保peerDependencies正确声明@angular/core、@angular/common等Angular核心依赖，避免将这些宿主项目应提供的依赖打包进类库产物
• 严格区分dependencies和devDependencies：开发工具（如source-map-explorer、@angular-devkit/build-angular）必须放在devDependencies，禁止混入生产依赖

tsconfig.lib.json #

• 确认compilerOptions.target和compilerOptions.module均设置为ES2022，与fesm2022产物格式匹配，避免低版本编译导致的代码冗余
• 检查angularCompilerOptions.enableIvy是否为true（Angular 17默认启用），Ivy编译器能大幅优化打包体积；同时开启strictTemplates减少模板冗余代码
• 确保skipLibCheck设为true，避免第三方库类型检查干扰，同时开启strict模式保证编译代码的高效性

ng-package.json #

• 核查lib.entryFile是否指向正确的类库入口，避免误导入整个项目代码
• 确认umdModuleIds正确映射第三方依赖，防止打包时重复生成模块包装代码
• 检查assets配置是否误将大体积静态资源（如图片、JSON配置）打包进fesm产物，此类资源应单独放置在assets目录，采用按需加载方式

angular.json #

• 确保projects.[你的类库名].architect.build.configurations.production.optimization设为true，生产构建必须开启代码优化
• 检查build配置中outputHashing是否为bundles，避免重复打包资源
• 生产构建时关闭sourceMap（仅在分析体积时开启），虽然source map不影响fesm体积，但需保证优化参数配置正确

4. 深度体积分析工具 #

• 再次运行source-map-explorer dist/[你的类库名]/fesm2022/[产物文件名].mjs，定位大体积组件中的具体冗余代码块（如重复依赖、未摇树的代码）
• 执行ng build [你的类库名] --stats-json生成webpack统计文件，使用webpack-bundle-analyzer打开，直观查看打包内容的组成结构
• 排查是否存在副作用导入（如import 'some-lib/styles.css'），此类导入会阻止摇树优化，需改为按需导入样式

内容的提问来源于stack exchange，提问作者DeejC