1

first of all i have to say i'm no angular expert, but i'm facing a problem with A Huge vendor.bundle.js reaching 21MB, which is really bad I'm guessing xD.

chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 1.56 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 559 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 2.63 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 22.8 MB [initial] [rendered]

it goes down to 8MB once using --aot and build-optimizer, but still i think its way too huge,

i've did the webpack analyzer and i got these results enter image description here and i think that i have a huge chunks for compiler and core js to when i check for other people's web pack analysis.

and from what i understood from other threads, that it has something to do with the imports, the libraries we add to the project.

but it wasn't clear to me what imports and from what file. is it the the app.module.ts ? is it the only file that decides and make the vendor file bigger ? or are there any other files that contribute to the size of the vendor file ?

so here is a list of all imports from the app.module.ts 

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {ComponentsModule} from 'app/components/components.module';
import {PagesModule} from 'app/pages/pages.module';

import {AuthService} from 'app/services/auth/auth.service';
import {AuthGuardService} from 'app/services/auth/auth-guard.service';
import {UserGuardService} from 'app/services/auth/user-guard.service';
import {AlertService} from 'app/alert.service';
import {routes} from './app.routes';
import {HttpModule} from '@angular/http';
import {UsersService} from './services/users.service';
import {CompaniesService} from './services/companies.service';
import {CustomersService} from './services/customers.service';
import {ProductsService} from 'app/services/products.service';
import {MessageService} from 'primeng/components/common/messageservice';
import {ConfirmationService} from 'primeng/components/common/confirmationservice';
import {GrowlModule} from 'primeng/components/growl/growl';
import {ContactPersonService} from 'app/services/contact-person.service';
import {CompanyDeviceService} from 'app/services/company-device.service';
import {CompanyCredintialService} from 'app/services/company-credintial.service';
import {DepartmentsService} from './services/departments.service';
import {ClubsService} from './services/clubs.service';
import { FilteringPipe } from './pipes/filtering.pipe';

any ideas, suggestions, comments and help would be much appreciated thanks allot

Majd Mahajenah
  • 69
  • 10
  • 1
    Possible duplicate of [Angular2 CLI huge vendor bundle: how to improve size for prod?](https://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod) – Dhaval kansagara Apr 02 '18 at 11:59
  • that was first thread that i visited and tried :) didn't really help me. but thanks :) – Majd Mahajenah Apr 02 '18 at 12:25

2 Answers2

1

I am not angular expert too, I'm learning too. What I understood by your wrote, besides using AOT, you can apply Lazy Load, I don`t know if this can help for this problem, but I know this can load less modules. Sorry for my english and my knowledge

Chiien
  • 341
  • 1
  • 3
  • 14
  • its ok, I appreciate the help, i think it's a different issue, lazy load might help with the data if i'm correct, but here still 22MB is way too big and i think it's the libraries that i'm importing. your english is good :) and thanks again – Majd Mahajenah Apr 02 '18 at 12:23
0

vendor.js contains any libraries imported into your app (app.module), including the Angular libraries. Third party libraries imported into your app also get compiled into this file (e.g. lodash, moment etc).

This file is usually HUGE after a dev compile (ng build) because it contains everything required to compile Angular in the browser. Always run a prod build (ng build –prod) before releasing your app to production. A prod build runs the Ahead of Time (AoT) compilation and performs tree-shaking, thus making the bundle much more small in size.

Ankit Choudhary
  • 145
  • 2
  • 13