Angular 6 How to Increase speed of Inital load Page
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
Hi, I can't figure out to gzip compression response from server to decrease bundle JS size!!!.
- I have tried this link 1 ,link 2, link 3 but can't success still Initial loading
page too slow. - Angular bundle size such as vendor.js 15 MB size, main.js 784KB,
style.js 952KB. - I have routing module with rendered components based on router.
- I have updated with package.json & angular.json file , I just run my application
with npm start then initial loading page too slow almost 16.9 MB size
transferred.Thanks
Package.JSON
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/common": "^6.1.0", //may be I need to downgrade to lower version?
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.8.8",
"@angular/cli": "6.1.0",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "^2.8.14",
"typescript": "^2.7.2"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"CFCH": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/CFCH",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"src/theme.less",
"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
"src/styles.css"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "CFCH:build"
},
"configurations": {
"production": {
"browserTarget": "CFCH:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "CFCH: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": [
"src/theme.less",
"src/styles.css"
],
"scripts": ,
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"CFCH-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "CFCH:serve"
},
"configurations": {
"production": {
"devServerTarget": "CFCH:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "CFCH"
}
app-routing.module.ts
const routes: Routes = [
{
path: '',
component: CfchDataTableComponent,
//loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent', //lazy loaded module
//path: '', loadChildren: () => CfchDataTableComponent,
data: { preload: true }
//pathMatch: 'full',
},
{
path:'singleCompanyStockList',
component:SingleCompanyListComponent
},
{
path:'valuation',
component:ValuationComponent
},
{
path:'risk',
component:RiskComponent
},
{ path:'login',
component:LoginComponent
},
{ path:'register',
component:RegisterPageComponent
},
{ path:'forgetPwd',
component:ForgetPasswordComponent
},
{ path:'info',
component:InfoComponent
},
{ path:'essentialInfo',
component:EssentialInfoComponent
},
{ path:'manageCompany',
//canActivate: [AuthGuard],
component:ManageCompanyComponent
},
{
path:'dataManage',
//canActivate: [AuthGuard],
component:DatamanageComponent
},
{
path:'benchmark',
canActivate: [AuthGuard],
component:BenchmarkingComponent
},
{
path:'financeEntry',
component:FinanceEntryComponent
},
{ path:'joinUS',
component:JoinUsPageComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)
],
exports: [RouterModule],
})
export class AppRoutingModule { }
- please see attached browser console network result
angular angular6 angular-cli asked Jan 4 at 9:20
sameersameer
1192413
add a comment |
0
Hi, I can't figure out to gzip compression response from server to decrease bundle JS size!!!.
- I have tried this link 1 ,link 2, link 3 but can't success still Initial loading
page too slow. - Angular bundle size such as vendor.js 15 MB size, main.js 784KB,
style.js 952KB. - I have routing module with rendered components based on router.
- I have updated with package.json & angular.json file , I just run my application
with npm start then initial loading page too slow almost 16.9 MB size
transferred.Thanks
Package.JSON
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/common": "^6.1.0", //may be I need to downgrade to lower version?
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.8.8",
"@angular/cli": "6.1.0",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "^2.8.14",
"typescript": "^2.7.2"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"CFCH": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/CFCH",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"src/theme.less",
"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
"src/styles.css"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "CFCH:build"
},
"configurations": {
"production": {
"browserTarget": "CFCH:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "CFCH: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": [
"src/theme.less",
"src/styles.css"
],
"scripts": ,
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"CFCH-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "CFCH:serve"
},
"configurations": {
"production": {
"devServerTarget": "CFCH:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "CFCH"
}
app-routing.module.ts
const routes: Routes = [
{
path: '',
component: CfchDataTableComponent,
//loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent', //lazy loaded module
//path: '', loadChildren: () => CfchDataTableComponent,
data: { preload: true }
//pathMatch: 'full',
},
{
path:'singleCompanyStockList',
component:SingleCompanyListComponent
},
{
path:'valuation',
component:ValuationComponent
},
{
path:'risk',
component:RiskComponent
},
{ path:'login',
component:LoginComponent
},
{ path:'register',
component:RegisterPageComponent
},
{ path:'forgetPwd',
component:ForgetPasswordComponent
},
{ path:'info',
component:InfoComponent
},
{ path:'essentialInfo',
component:EssentialInfoComponent
},
{ path:'manageCompany',
//canActivate: [AuthGuard],
component:ManageCompanyComponent
},
{
path:'dataManage',
//canActivate: [AuthGuard],
component:DatamanageComponent
},
{
path:'benchmark',
canActivate: [AuthGuard],
component:BenchmarkingComponent
},
{
path:'financeEntry',
component:FinanceEntryComponent
},
{ path:'joinUS',
component:JoinUsPageComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)
],
exports: [RouterModule],
})
export class AppRoutingModule { }
- please see attached browser console network result
angular angular6 angular-cli asked Jan 4 at 9:20
sameersameer
1192413
What is the size of the bundles on a production build?ng build --prod
– Sterex
Jan 4 at 9:47
Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB
– sameer
Jan 4 at 9:59
That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?)
– hevans900
Jan 4 at 10:20
I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks
– sameer
Jan 4 at 11:15
modify package.json. Change "build": "ng build", to "build": "ng build --prod",
– rjdkolb
Jan 7 at 5:34
add a comment |
0
0
0
Hi, I can't figure out to gzip compression response from server to decrease bundle JS size!!!.
- I have tried this link 1 ,link 2, link 3 but can't success still Initial loading
page too slow. - Angular bundle size such as vendor.js 15 MB size, main.js 784KB,
style.js 952KB. - I have routing module with rendered components based on router.
- I have updated with package.json & angular.json file , I just run my application
with npm start then initial loading page too slow almost 16.9 MB size
transferred.Thanks
Package.JSON
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/common": "^6.1.0", //may be I need to downgrade to lower version?
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.8.8",
"@angular/cli": "6.1.0",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "^2.8.14",
"typescript": "^2.7.2"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"CFCH": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/CFCH",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"src/theme.less",
"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
"src/styles.css"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "CFCH:build"
},
"configurations": {
"production": {
"browserTarget": "CFCH:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "CFCH: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": [
"src/theme.less",
"src/styles.css"
],
"scripts": ,
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"CFCH-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "CFCH:serve"
},
"configurations": {
"production": {
"devServerTarget": "CFCH:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "CFCH"
}
app-routing.module.ts
const routes: Routes = [
{
path: '',
component: CfchDataTableComponent,
//loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent', //lazy loaded module
//path: '', loadChildren: () => CfchDataTableComponent,
data: { preload: true }
//pathMatch: 'full',
},
{
path:'singleCompanyStockList',
component:SingleCompanyListComponent
},
{
path:'valuation',
component:ValuationComponent
},
{
path:'risk',
component:RiskComponent
},
{ path:'login',
component:LoginComponent
},
{ path:'register',
component:RegisterPageComponent
},
{ path:'forgetPwd',
component:ForgetPasswordComponent
},
{ path:'info',
component:InfoComponent
},
{ path:'essentialInfo',
component:EssentialInfoComponent
},
{ path:'manageCompany',
//canActivate: [AuthGuard],
component:ManageCompanyComponent
},
{
path:'dataManage',
//canActivate: [AuthGuard],
component:DatamanageComponent
},
{
path:'benchmark',
canActivate: [AuthGuard],
component:BenchmarkingComponent
},
{
path:'financeEntry',
component:FinanceEntryComponent
},
{ path:'joinUS',
component:JoinUsPageComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)
],
exports: [RouterModule],
})
export class AppRoutingModule { }
- please see attached browser console network result
angular angular6 angular-cli asked Jan 4 at 9:20
sameersameer
1192413
Hi, I can't figure out to gzip compression response from server to decrease bundle JS size!!!.
- I have tried this link 1 ,link 2, link 3 but can't success still Initial loading
page too slow. - Angular bundle size such as vendor.js 15 MB size, main.js 784KB,
style.js 952KB. - I have routing module with rendered components based on router.
- I have updated with package.json & angular.json file , I just run my application
with npm start then initial loading page too slow almost 16.9 MB size
transferred.Thanks
Package.JSON
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/common": "^6.1.0", //may be I need to downgrade to lower version?
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.8.8",
"@angular/cli": "6.1.0",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "^2.8.14",
"typescript": "^2.7.2"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"CFCH": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/CFCH",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"src/theme.less",
"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
"src/styles.css"
],
"scripts":
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "CFCH:build"
},
"configurations": {
"production": {
"browserTarget": "CFCH:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "CFCH: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": [
"src/theme.less",
"src/styles.css"
],
"scripts": ,
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"CFCH-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "CFCH:serve"
},
"configurations": {
"production": {
"devServerTarget": "CFCH:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "CFCH"
}
app-routing.module.ts
const routes: Routes = [
{
path: '',
component: CfchDataTableComponent,
//loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent', //lazy loaded module
//path: '', loadChildren: () => CfchDataTableComponent,
data: { preload: true }
//pathMatch: 'full',
},
{
path:'singleCompanyStockList',
component:SingleCompanyListComponent
},
{
path:'valuation',
component:ValuationComponent
},
{
path:'risk',
component:RiskComponent
},
{ path:'login',
component:LoginComponent
},
{ path:'register',
component:RegisterPageComponent
},
{ path:'forgetPwd',
component:ForgetPasswordComponent
},
{ path:'info',
component:InfoComponent
},
{ path:'essentialInfo',
component:EssentialInfoComponent
},
{ path:'manageCompany',
//canActivate: [AuthGuard],
component:ManageCompanyComponent
},
{
path:'dataManage',
//canActivate: [AuthGuard],
component:DatamanageComponent
},
{
path:'benchmark',
canActivate: [AuthGuard],
component:BenchmarkingComponent
},
{
path:'financeEntry',
component:FinanceEntryComponent
},
{ path:'joinUS',
component:JoinUsPageComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)
],
exports: [RouterModule],
})
export class AppRoutingModule { }
- please see attached browser console network result
angular angular6 angular-cli angular angular6 angular-cli asked Jan 4 at 9:20
sameersameer
1192413
asked Jan 4 at 9:20
sameersameer
1192413
edited Jan 10 at 4:25
sameer
asked Jan 4 at 9:20
sameersameer
1192413
asked Jan 4 at 9:20
sameersameer
1192413
asked Jan 4 at 9:20
sameersameer
1192413
1192413
What is the size of the bundles on a production build?ng build --prod
– Sterex
Jan 4 at 9:47
Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB
– sameer
Jan 4 at 9:59
That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?)
– hevans900
Jan 4 at 10:20
I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks
– sameer
Jan 4 at 11:15
modify package.json. Change "build": "ng build", to "build": "ng build --prod",
– rjdkolb
Jan 7 at 5:34
add a comment |
What is the size of the bundles on a production build?ng build --prod
– Sterex
Jan 4 at 9:47
Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB
– sameer
Jan 4 at 9:59
That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?)
– hevans900
Jan 4 at 10:20
I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks
– sameer
Jan 4 at 11:15
modify package.json. Change "build": "ng build", to "build": "ng build --prod",
– rjdkolb
Jan 7 at 5:34
What is the size of the bundles on a production build?
ng build --prod– Sterex
Jan 4 at 9:47
What is the size of the bundles on a production build?
ng build --prod– Sterex
Jan 4 at 9:47
Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB
– sameer
Jan 4 at 9:59
Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB
– sameer
Jan 4 at 9:59
That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?)
– hevans900
Jan 4 at 10:20
That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?)
– hevans900
Jan 4 at 10:20
I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks
– sameer
Jan 4 at 11:15
I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks
– sameer
Jan 4 at 11:15
modify package.json. Change "build": "ng build", to "build": "ng build --prod",
– rjdkolb
Jan 7 at 5:34
modify package.json. Change "build": "ng build", to "build": "ng build --prod",
– rjdkolb
Jan 7 at 5:34
add a comment |
3 Answers
3
active
oldest
votes
1
Enable production compilation by modifying your package.json
This:
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
should be:
(Add --prod)
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build --prod",
Your vendor Java script should be dramatically smaller in your dist directory.
Of course this will not change the Java script size when running "npm start". That is developer mode.
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
add a comment |
2
Gzip is done by your hosting server, that serves your angular app. It have nothing do with your javascript framework be it angular or any other.
Having that out of the way most cloud hosting service providers configures gzip compression out of the box. But the one I found free and easier for personal projects trials is firebase.com from google which also provides SSL for free too you can check out their hosting service.
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
There is an edit on your linked question that applies to you:EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).
– Sterex
Jan 4 at 9:45
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
|
show 1 more comment
1
**lazy loading **
Yo have to change app routing module to lazy loading modules.dramatically decrease the size of main.js and vendor.js.
answered Jan 8 at 0:17
AddisalemAddisalem
964
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54036056%2fangular-6-how-to-increase-speed-of-inital-load-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Enable production compilation by modifying your package.json
This:
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
should be:
(Add --prod)
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build --prod",
Your vendor Java script should be dramatically smaller in your dist directory.
Of course this will not change the Java script size when running "npm start". That is developer mode.
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
add a comment |
1
Enable production compilation by modifying your package.json
This:
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
should be:
(Add --prod)
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build --prod",
Your vendor Java script should be dramatically smaller in your dist directory.
Of course this will not change the Java script size when running "npm start". That is developer mode.
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
add a comment |
1
1
1
Enable production compilation by modifying your package.json
This:
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
should be:
(Add --prod)
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build --prod",
Your vendor Java script should be dramatically smaller in your dist directory.
Of course this will not change the Java script size when running "npm start". That is developer mode.
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
Enable production compilation by modifying your package.json
This:
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build",
should be:
(Add --prod)
{
"name": "cfch",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json ",
"build": "ng build --prod",
Your vendor Java script should be dramatically smaller in your dist directory.
Of course this will not change the Java script size when running "npm start". That is developer mode.
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
edited Jan 7 at 5:43
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
answered Jan 7 at 5:37
rjdkolbrjdkolb
4,91974864
4,91974864
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
add a comment |
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :stackoverflow.com/questions/48402695/… but I don't want to downgrade my latest version.Thanks
– sameer
Jan 7 at 6:26
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components
– rjdkolb
Jan 7 at 6:40
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
I used to build ng build --prod --aot=false
– sameer
Jan 7 at 7:47
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
Your js will be much smaller, but not as small as it can be.
– rjdkolb
Jan 7 at 7:58
add a comment |
2
Gzip is done by your hosting server, that serves your angular app. It have nothing do with your javascript framework be it angular or any other.
Having that out of the way most cloud hosting service providers configures gzip compression out of the box. But the one I found free and easier for personal projects trials is firebase.com from google which also provides SSL for free too you can check out their hosting service.
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
There is an edit on your linked question that applies to you:EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).
– Sterex
Jan 4 at 9:45
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
|
show 1 more comment
2
Gzip is done by your hosting server, that serves your angular app. It have nothing do with your javascript framework be it angular or any other.
Having that out of the way most cloud hosting service providers configures gzip compression out of the box. But the one I found free and easier for personal projects trials is firebase.com from google which also provides SSL for free too you can check out their hosting service.
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
There is an edit on your linked question that applies to you:EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).
– Sterex
Jan 4 at 9:45
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
|
show 1 more comment
2
2
2
Gzip is done by your hosting server, that serves your angular app. It have nothing do with your javascript framework be it angular or any other.
Having that out of the way most cloud hosting service providers configures gzip compression out of the box. But the one I found free and easier for personal projects trials is firebase.com from google which also provides SSL for free too you can check out their hosting service.
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
Gzip is done by your hosting server, that serves your angular app. It have nothing do with your javascript framework be it angular or any other.
Having that out of the way most cloud hosting service providers configures gzip compression out of the box. But the one I found free and easier for personal projects trials is firebase.com from google which also provides SSL for free too you can check out their hosting service.
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
answered Jan 4 at 9:30
Abdullah TayelAbdullah Tayel
2814
2814
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
There is an edit on your linked question that applies to you:EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).
– Sterex
Jan 4 at 9:45
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
|
show 1 more comment
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
There is an edit on your linked question that applies to you:EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).
– Sterex
Jan 4 at 9:45
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks
– sameer
Jan 4 at 9:38
There is an edit on your linked question that applies to you:
EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).– Sterex
Jan 4 at 9:45
There is an edit on your linked question that applies to you:
EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).– Sterex
Jan 4 at 9:45
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
@sameer can you post you package.json and angular.json files ?
– Abdullah Tayel
Jan 5 at 5:23
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
please see my post updated with angular.json file .Thanks
– sameer
Jan 7 at 1:22
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck
– Abdullah Tayel
Jan 7 at 16:23
|
show 1 more comment
1
**lazy loading **
Yo have to change app routing module to lazy loading modules.dramatically decrease the size of main.js and vendor.js.
answered Jan 8 at 0:17
AddisalemAddisalem
964
add a comment |
1
**lazy loading **
Yo have to change app routing module to lazy loading modules.dramatically decrease the size of main.js and vendor.js.
answered Jan 8 at 0:17
AddisalemAddisalem
964
add a comment |
1
1
1
**lazy loading **
Yo have to change app routing module to lazy loading modules.dramatically decrease the size of main.js and vendor.js.
answered Jan 8 at 0:17
AddisalemAddisalem
964
**lazy loading **
Yo have to change app routing module to lazy loading modules.dramatically decrease the size of main.js and vendor.js.
answered Jan 8 at 0:17
AddisalemAddisalem
964
answered Jan 8 at 0:17
AddisalemAddisalem
964
answered Jan 8 at 0:17
AddisalemAddisalem
964
answered Jan 8 at 0:17
AddisalemAddisalem
964
964
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54036056%2fangular-6-how-to-increase-speed-of-inital-load-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is the size of the bundles on a production build?
ng build --prod– Sterex
Jan 4 at 9:47
Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB
– sameer
Jan 4 at 9:59
That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?)
– hevans900
Jan 4 at 10:20
I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks
– sameer
Jan 4 at 11:15
modify package.json. Change "build": "ng build", to "build": "ng build --prod",
– rjdkolb
Jan 7 at 5:34