Angular 17/18构建后生成大量chunk文件问题求助

我开发的单语言Angular 17应用，此前生产构建仅生成2个chunk文件；近期未修改配置与构建命令，却突然生成30余个chunk文件，开启namedChunks:true后文件以组件命名。升级至Angular 18后问题仍存在。尝试安装custom-webpack管控构建、减少chunk文件时，因@angular-material-components/datetime-picker（16.0.1，已是最新版）兼容性报错，安装custom-webpack 16也无法解决。现附上当前配置，求将chunk文件缩减至1-2个的方法。

1. 修改Angular构建配置强制合并chunk #

在angular.json的production配置中，将optimization从布尔值改为对象，禁用脚本分割，并关闭vendor和公共chunk：

"production": {
  // 其他原有配置
  "optimization": {
    "scripts": {
      "splitChunks": false
    },
    "styles": {
      "inlineCritical": false
    },
    "fonts": true
  },
  "vendorChunk": false,
  "commonChunk": false
}

此配置会强制将所有代码合并到主chunk中，大幅减少生成的文件数量。

2. 排查意外引入的组件懒加载 #

全局搜索项目中的() => import(语法，确认是否存在非路由场景下的组件懒加载（比如误写在组件引用中）。如果不是业务需要的懒加载，将其改为直接导入：

• 错误示例：loadComponent: () => import('./user/user.component')
• 修改为：先在顶部导入import { UserComponent } from './user/user.component'，再写component: UserComponent

3. 处理依赖兼容性问题 #

@angular-material-components/datetime-picker 16.x版本与Angular 18不兼容，无需使用custom-webpack，用上述原生配置即可控制chunk。如果必须保留该组件：

• 尝试安装适配Angular 17+的beta版本：npm i @angular-material-components/datetime-picker@17.0.0-beta.0
• 或替换为Angular Material原生的MatDatepicker+MatTimepicker组合组件

4. 调整chunk大小阈值 #

在production的budgets中新增chunk类型规则，避免因文件过小被自动分割：

"budgets": [
  // 原有initial、anyComponentStyle规则
  {
    "type": "chunk",
    "maximumWarning": "10mb",
    "maximumError": "20mb"
  }
]

angular.json（关键部分） #

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:application",
        "options": {
            "outputPath": "dist/myapp",
            "outputHashing": "none",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon_640.ico", "src/assets"],
            "styles": ["@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
            "scripts": []
        },
        "configurations": {
            "production": {
                "budgets": [
                    {
                        "type": "initial",
                        "maximumWarning": "10mb",
                        "maximumError": "20mb"
                    },
                    {
                        "type": "anyComponentStyle",
                        "maximumWarning": "10kb",
                        "maximumError": "20kb"
                    }
                ],
                "outputHashing": "none",
                "fileReplacements": [
                    {
                        "replace": "src/environments/environment.ts",
                        "with": "src/environments/environment.prod.ts"
                    }
                ],
                "optimization": true,
                "sourceMap": false,
                "namedChunks": false,
                "extractLicenses": false
            },
            "development": {
                "optimization": false,
                "extractLicenses": false,
                "sourceMap": true
            }
        },
        "defaultConfiguration": "production"
    },
    // serve、extract-i18n、test部分省略
}

package.json依赖 #

"dependencies": {
    "@angular-material-components/datetime-picker": "^16.0.1",
    "@angular/animations": "18.2.7",
    "@angular/cdk": "18.2.7",
    "@angular/common": "18.2.7",
    "@angular/compiler": "18.2.7",
    "@angular/core": "18.2.7",
    "@angular/forms": "18.2.7",
    "@angular/material": "18.2.7",
    "@angular/material-moment-adapter": "^18.2.7",
    "@angular/platform-browser": "18.2.7",
    "@angular/platform-browser-dynamic": "18.2.7",
    "@angular/router": "18.2.7",
    "@ckeditor/ckeditor5-angular": "^7.0.1",
    "@ckeditor/ckeditor5-build-classic": "^41.2.1",
    "@ckeditor/ckeditor5-build-decoupled-document": "^41.2.1",
    "@ckeditor/ckeditor5-core": "^41.2.1",
    "@ckeditor/ckeditor5-engine": "^41.2.1",
    "@ckeditor/ckeditor5-utils": "^41.2.1",
    "@ckeditor/ckeditor5-watchdog": "^41.2.1",
    "@fortawesome/angular-fontawesome": "0.14.1",
    "@fortawesome/fontawesome-svg-core": "6.5.1",
    "@fortawesome/free-solid-svg-icons": "6.5.1",
    "chart.js": "4.4.2",
    "lodash": "4.17.21",
    "rxjs": "7.8.0",
    "tslib": "2.3.0",
    "zone.js": "0.14.10"
},
"devDependencies": {
    "@angular-devkit/build-angular": "18.2.7",
    "@angular/cli": "18.2.7",
    "@angular/compiler-cli": "18.2.7",
    "@types/jasmine": "5.1.0",
    "jasmine-core": "5.1.0",
    "karma": "6.4.0",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "moment": "^2.30.1",
    "typescript": "5.5.4"
}

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