Angular 15 CLI打包耗时过长问题求助

针对你遇到的打包耗时20分钟、热更新缓慢的问题，结合提供的配置文件，给出以下优化方案：

1. 优化CommonJS依赖处理 #

你的配置中允许了moment、lodash、venn.js三个CommonJS模块，这类模块会增加Webpack的解析开销：

• Lodash：已使用lodash-es（ES模块版本），确保代码中是按需导入，比如import { debounce } from 'lodash-es'，而非全量导入import _ from 'lodash-es'
• Moment.js：建议替换为dayjs（体积更小、原生ES模块、API兼容）；若不愿替换，可尝试安装moment-es6版本，减少解析时间
• venn.js：若存在ES模块版本优先切换；无ES模块版本时，可通过自定义Webpack配置（需安装@angular-builders/custom-webpack）添加module.noParse跳过该模块的解析

2. 调整开发模式构建配置 #

修改angular.json中development构建配置，减少不必要的编译开销：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": {
    "scripts": true, // 仅保留脚本的sourceMap，方便调试
    "styles": false, // 关闭样式sourceMap，开发阶段非必需
    "vendor": false  // 关闭第三方库sourceMap，减少生成时间
  },
  "namedChunks": false // 关闭命名chunk，减少打包时的命名处理开销
}

3. 优化样式导入方式 #

将angular.json中直接导入的第三方CSS，迁移到src/styles.scss中通过SCSS语法导入，利用SCSS的缓存机制提升编译速度：

1. 修改angular.json的styles数组：

"styles": [
  "src/styles.scss"
]

2. 在src/styles.scss中添加导入：

@import 'bootstrap/dist/css/bootstrap.css';
@import 'primeicons/primeicons.css';
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.min.css';

4. 启用并清理构建缓存 #

Angular CLI默认支持构建缓存，确保配置开启并清理旧缓存：

• 执行命令开启缓存：ng config cli.cache.enabled true
• 清理旧缓存（避免缓存损坏）：rm -rf .angular/cache，之后重新执行ng serve

5. 升级依赖到同版本最新版 #

当前使用的Angular 15.2.9可升级到15.x分支的最新版本（如15.2.10），同步升级@angular-devkit/build-angular，新版本通常包含性能优化：

ng update @angular/core@15 @angular/cli@15

6. 按需导入PrimeNG组件 #

避免全局导入PrimeNG所有组件，仅在需要的模块中导入对应组件，减少打包体积和编译时间：

// 示例：仅导入Button组件
import { ButtonModule } from 'primeng/button';

@NgModule({
  imports: [ButtonModule]
})
export class YourModule { }

7. 精简静态资源 #

检查src/assets目录，移除不需要的大文件（如高清图片、未使用的静态资源），减少Angular打包时的资源复制开销

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