0

I'm trying to optimize my Angular application for Production. Currently I'm using Uglify, Compression, ... and I'm compiling in AOT. When I compile the application I'm getting this message: 

Asset     Size  Chunks                    Chunk Names
main.bundle.js  2.66 MB       0  [emitted]  [big]  main
main.bundle.js.gz   530 kB          [emitted]  [big]
../index.html   2.3 kB          [emitted]

Looking in the Webpack Bundle Analyzer I have seen the next one: enter image description here

Here I have seen that:

1.- @angular/material are adding all the components to the bundle but I only use some of this.

2.- In my SRC are being added my *.component.ts files but also my *.component.ngfactory.ts (the same for my CSS)

So, my question is: Is there a way to ask Webpack not to include the components from material that I'm not using? And, what are the ngfactory files and why they are being added?

UPDATE 1: 11/14/2017

Hi, I have been investigating and I have seen that, when I'm compiling for AOT my browser.module.ngfactory.ts contain "import * from ..." for all the dependencies

import * as i81 from '../+app/+product/product.component';
import * as i82 from '../+app/+term/term.component';
import * as i83 from '../+app/+home/home.component';
import * as i84 from '../+app/+oops/oops.component';
import * as i85 from '@angular/material/toolbar';
import * as i86 from '@angular/material/button';
import * as i87 from '@angular/material/button-toggle';

For example, I'm not using angular/material/toolbar, so I don't understand why it is being added.

Cœur
  • 37,241
  • 25
  • 195
  • 267
IvanMoreno
  • 145
  • 10
  • By default (it's actually the whole point of the module system) the compiler will only import the packages you ask for. The problem is how you ask for them. I don't use Material, but I'll take a common example from Rxjs: a lot of people naively `import Rx from "rxjs/Rx";` without realizing that this causes the entirety of Rxjs to be included in the application bundle, regardless of what it 'actually used'. Ensure something like this isn't happening somewhere. – msanford Nov 13 '17 at 18:14
  • Hi @msanford , the problem is that I'm only importing the necessary modules from Material but after compiling, all are added. – IvanMoreno Nov 13 '17 at 20:05

1 Answers1

0

There's a lot of things that you could do to optimize your production builds (like removing unnecessary material modules). It looks to be like you're not using angular-cli, but their --build-optimizer flag for production builds is very helpful.

Based on your bundle analyzer report, your src modules are quite large, for this I would recommend lazy loading. It will allow you load the modules over time as the user navigates to them instead of all upon app initialization. You can see an example of lazy loading here

Here are some more detailed answers about optimizing angular bundle sizes

Jack Clancy
  • 1,281
  • 1
  • 10
  • 13
  • Hi Jack, thank's for your response. I'll try to implement Lazy Load :) But I don't know how I can do it: "like removing unnecessary material modules". Really I'm only loading material modules that are necessary. – IvanMoreno Nov 13 '17 at 20:12