针对生产环境优化Angular应用

Question

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:

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.

Answer 1

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