前言

随着业务的代码一点点增加，加上Angular的项目本身就比 vue、react 的重一些，随之而来的启动速度，更改文件后编译速度，以及打包速度也会变慢，于是乎想着优化下我们的项目。

本文章主要说的是 ：

1. 打包Angular项目的一些配置，性能优化方面的方案
2. 打包后，用户进入页面的速度提升

禁止Rollup 摇树优化

所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉，但不会删除这些代码，所以就需要配合 UglifyJs 能够智能的移除这些未使用的代码。从而减少包体大小。
而Agnular应用是基于Typescript，因此Angular Cli提供了一个叫 Angular Build Optimizer 插件，将 Typescript 编译结果转化成更友好的UglifyJs版本。这样UglifyJs就能够更有效的移除那些未使用的代码。
Angular Cli只需要加上 --build-optimizer 参数就可以，这将禁用供应商数据块，并导致代码更小。在一些情况下压缩的还是很厉害的。

在package.json 打包命令的地方

• –build-optimizer=true

    "build-uat": "ng build --prod --configuration=uat --build-optimizer=true",

build-optimizer的 true 与 false 区别

这里说的是package.json 的打包命令

true

• –build-optimizer=true

默认情况下会启用Tree-Shaking。但是虽然减小了构建大小（只会减小几kb），打包的速度会增加

• 打包后大小 36.6M

false

• –build-optimizer=false

不使用摇树优化，牺牲打包空间换取时间
禁