在过去的几个月里，我一直在开发 Angular 17 应用程序（仅使用一种语言），当我将其构建用于生产时，我注意到生成了一些“块”文件。
经过一番调查（并在 ChatGPT 的帮助下），我对配置和构建命令进行了一些更改，最终只有 2 个块文件，其中包括构建文件夹中的其他文件。
直到几天前，这还不错，并且按照我想要的方式为我工作。
突然，现在当我运行此构建时，无需对配置或构建命令进行任何更改，就会有超过 30 个（！）块文件。
当设置 "namedChunks": true 时，在 angular.json 下，这些文件以应用程序中的某些组件命名。
昨天，出于其他一般原因，我将应用程序升级到了 Angular 18，并且一切顺利，但这个问题仍然出现。
我不明白为什么构建结果会突然发生变化。
另一个子问题是我正在尝试安装“custom-webpack”包以更好地控制构建过程（也许这也会缩小块文件的数量），但我收到一个关于与“@angular-material-components/datetime-picker”版本（16.0.1）的兼容性。当尝试只升级这个包时，它说这是这个包的最新版本，所以这里没有什么可以升级的。
因此，我尝试安装 16 版的 custom-webpack，但它仍然会警告此兼容性问题并且不让我安装。
这是我当前在 angular.json 下的配置： （注释行是我要使用 custom-webpack 检查的内容，但没有进行测试，因为它无法安装，如本文中所述）
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
//"builder": "@angular-builders/custom-webpack:browser",
"options": {
//"customWebpackConfig": {
// "path": "./webpack.config.js"
//},
"outputPath": "dist/myapp",
"outputHashing": "none",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": ["zone.js"],
//"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
//"aot": true,
"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",
"outputHashing": "none",
//"extractCss": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"sourceMap": false,
"namedChunks": false,
//"aot": true,
//"vendorChunk": false,
//"buildOptimizer": true,
"extractLicenses": false
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "Myapp:build:production"
},
"development": {
"buildTarget": "Myapp:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "Myapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon_640.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/tinymce",
"output": "/tinymce/"
}
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [
"node_modules/tinymce/tinymce.min.js",
"node_modules/tinymce/themes/modern/theme.js",
"node_modules/tinymce/plugins/fullscreen/plugin.js"
]
}
}
}
这是应用程序的当前包列表（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"
}
那么，我该如何设置构建来停止生成如此多的块文件，将这个数量缩小到 1 或 2，就像不久前那样？？
块通常是通过
lazy loading modulesstandalone如果启用了延迟加载，请将其转换为以下内容，这样就不会生成块。
const routes: Routes = [
{
path: 'items',
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
}
];
const routes: Routes = [
{
path: 'items',
loadChildren: () => ItemsModule
}
];
独立组件应删除其
standalone: trueAppModule浏览器支持同时并行获取最多 10 个 API 调用。因此，通过块获取可以提高应用程序中 Angular javascript 资源的获取时间。
延迟加载可以减少主包的大小，因为它是在绝对需要模块时获取/预加载的。
标志
"buildOptimizer": true"aot": true,TLDR：不要这样做，因为它可以提高您的应用程序性能，并且即使捆绑数量很高，拥有它也很好。