Visual Studio Angular Production Build生成大量Lazy Chunk文件

ax6ht2ek  于 12个月前  发布在  Angular
关注(0)|答案(1)|浏览(87)

我是一个angular新手,目前正在开发一个Angular应用程序,该应用程序通过Visual Studio创建,最近更新到最新的Angular版本(12)。
我的应用程序没有任何延迟加载的实现。但是当我发布应用程序时,它正在生成大量的js文件,名称为Lazy Chunk Files
我的构建输出如下。

我的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 { }

我需要在执行构建时停止生成这些惰性块文件。你们有什么想法吗?
(如果您需要更多信息,请告诉我)

lskq00tm

lskq00tm1#

我只是在回答我自己的问题,因为我刚刚找到了生成大量js文件的原因。
首先,我更改了生产构建配置设置,通过使用以下设置生成块文件及其名称(目前它只是一个GUID),

"namedChunks": true

结果如下:x1c 0d1x
在看到这些名称后,我意识到这些块文件来自angular/common/locals,我在应用程序中使用它来启用西班牙语(es)和英语(en)语言。
@angular/common/locals有大量的js语言文件,适用于世界上所有的文化。但在我的情况下,我只需要es和en语言。因此,我只是删除了那些不必要的js文件,用于其他文化。
最后输出如下:

(已更新)

如果你仍然有很多js lazy chunk文件,试着删除angular cache文件夹。(ClientApp/.angular)

相关问题