angular 首屏加载优化_angular 编译首页载入文件过大如何优化

首次需要载入的main.js实在是太大了

app.module.ts

import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { RouterModule } from '@angular/router';

import { LayoutsModule } from '@/layouts/layouts.module';

import { ApiService } from '@/services/api.service';

import { UtilService } from '@/services/util.service';

import { AppComponent } from './ponent';

import { AppRoute } from './app.route';

@NgModule({

bootstrap: [

AppComponent,

],

declarations: [

AppComponent,

],

imports: [

BrowserAnimationsModule,

LayoutsModule,

RouterModule.forRoot(AppRoute, { onSameUrlNavigation: 'reload' }),

],

providers: [

ApiService,

UtilService,

],

})

export class AppModule { }

components.module.ts

import { CommonModule } from '@angular/common';

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { RouterModule } from '@angular/router';

import { NgZorroAntdModule, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from 'ng-zorro-antd';

import { IconDefinition } from '@ant-design/icons-angular';

import { DeleteOutline,SearchOutline,PlusOutline,FormOutline,CloseOutline } from '@ant-design/icons-angular/icons';

import { PipesModule } from "@/pipe/pipe.module";

const icons: IconDefinition[] = [DeleteOutline,SearchOutline,PlusOutline,FormOutline,CloseOutline];

const components = [

];

const modules = [

CommonModule,

FormsModule,

HttpClientModule,

NgZorroAntdModule,

ReactiveFormsModule,

RouterModule,

PipesModule,

];

@NgModule({

declarations: [

...components,

],

exports: [

...components,

...modules,

],

imports: [

...modules,

],

providers: [

{ provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '#00ff00' }, // 不提供的话，即为 Ant Design 的主题蓝色

{ provide: NZ_ICONS, useValue: icons }

]

})

export class ComponentsModule { }

layout.module.ts

import { NgModule } from '@angular/core';

import { ComponentsModule } from '@/components/components.module';

import { BasicLayout } from './basic/basic.layout';

import { BlankLayout } from './blank/blank.layout';

import { LoginLayout } from './login/login.layout';

export const layouts = [

BasicLayout,

BlankLayout,

LoginLayout,

];

@NgModule({

declarations: [

...layouts,

],

entryComponents: [

...layouts,

],

imports: [

ComponentsModule,

],

})

export class LayoutsModule { }

angular.json

{

"projects": {

"app": {

"architect": {

"build": {

"builder": "@angular-devkit/build-angular:browser",

"configurations": {

"production": {

"aot": true,

"buildOptimizer": true,

"extractCss": true,

"extractLicenses": false,

"namedChunks": false,

"optimization": true,

"outputHashing": "all",

"polyfills": "src/prod.ts",

"sourceMap": false,

"vendorChunk": false

}

},

"options": {

"assets": [

"public",

{

"glob": "**/*",

"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",

"output": "/assets/"

}

],

"index": "public/index.html",

"main": "src/main.ts",

"outputPath": "dist",

"styles": [

"src/styles/index.scss"

],

"tsConfig": "tsconfig.json"

}

},

"serve": {

"builder": "@angular-devkit/build-angular:dev-server",

"options": {

"browserTarget": "app:build",

"hmr": true,

"hmrWarning": false,

"host": "0.0.0.0",

"open": true,

"port": 8200,

"proxyConfig": "proxy.config.js"

}

}

},

"projectType": "application",

"root": "",

"sourceRoot": "public"

}

},

"version": 1

}

现在的js都是压缩的了

有大神能帮忙看看么 这里的机制远离还不是很清楚 为啥这么大啊><