Angular 12 Production Build 生成大量 Lazy Chunk 文件

Question

我是 Angular 的新手，目前正在开发一个 Angular 应用程序，该应用程序通过 Visual Studio 创建并最近更新到最新的 Angular 版本 (12)。

我的应用程序没有任何延迟加载的实现。但是当我发布应用程序时，它会生成大量名为 Lazy Chunk Files 的 js 文件。

我的构建输出如下。

我的tsconfig.json文件如下，

然后，我的angular.json文件如下，

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Website": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "src/styles.css"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": ["@ctrl/ngx-codemirror", "xlsx"],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Website:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Website:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Website:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.server.json",
            "sourceMap": true,
            "optimization": false
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": ""
        }
      }
    },
    "Website-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Website:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Website"
}

我的 app-routing.module.ts 文件如下，(减少了一些重复的代码行和导入)

// Imports for the necessary components


const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'default' },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuard] },

  { path: 'authentication', component: AuthenticationComponent },
  { path: 'dialog-status', component: DialogStatusComponent },
  { path: 'dialog-confirm', component: DialogConfirmComponent },
    // There are some more paths defined for the dialog components in the real file

  { path: 'password', component: ChangePasswordComponent, canActivate: [AuthGuard] },
  { path: 'reports', component: ReportsComponent, canActivate: [AuthGuard], canDeactivate: [PendingChangesGuard] },
    // There are some more paths defined for the components in the real file

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的 app-module.ts 文件如下，(减少了一些重复的代码行和导入)

// Necessary imports


registerLocaleData(localeEs);


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    // And some more components
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    TranslateModule.forRoot({
      loader: {
        provide:  TranslateLoader,
        useClass: CustomLoader,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    AppService,
    TranslateService,
    PendingChangesGuard,
    {
      provide: LOCALE_ID,
      useFactory: (appService: AppService) => appService.getLocalLanguage(),
      deps: [AppService]
    }
  ],
  bootstrap: [AppComponent],
  exports: [TranslateModule]
})
export class AppModule { }

我需要在执行构建时停止生成这些惰性 block 文件。你们中有人对此有任何想法吗？？

(如果您需要任何信息，请告诉我)

Answer 1

我正在回答我自己的问题，因为我刚刚找到了生成那么多 js 文件的原因。

首先，我使用以下设置更改了生产构建配置设置，以生成带有名称的 block 文件(目前它只是一个 Guid)，

        "namedChunks": true

然后结果如下，

看到这些名称后，我意识到这些 block 文件来自 angular/common/locals，我在我的应用程序中使用它来启用西类牙语(es)和英语(en)语言。

@angular/common/locals 拥有世界上所有文化的大量 js 语言文件。但就我而言，我只需要 es 和 en 语言。因此，我干脆删除了那些不需要的其他文化的js文件。

最后我的输出如下，