简单谈谈关于Angular Cli打包的事
本文主要给大家介绍了关于AngularCli打包的事，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
一、引言
Angular从开发再到生产环境部署都离不开AngularCli工具集，而AngularCli本质上是使用Webpack（当前使用版本为2）来打包资源。
Webpack本身并不复杂，略用过一点都清楚，只需要创建一个webpack.config.js的文件并简单的配置，就可以把一个复杂的应用所有文件全部打包成若干静态资源文件。
然而一个复杂的应用免不了使用到第三方类库，当这些外部类库与自身业务脚本联系在一起时，就产生一个大家都关心的问题：性能优化。
AngularCli在构建一个含有路由、表单、HTTP等基本的Angular应用大约在150KB左右，就Angular体量而言，自己写一个Webpack也很难能优化到这个大小。所以说，AngularCli是很有良心的作品。然而极大的简化对Webpack的使用，何乐不为呢？
本文我将介绍AngularCli的一些配置在生产环境中所产生的效果，希望能让大家由于一些不合理的行为可能会导致文件体量的上升在改善这一问题时有所帮助。
二、.angular-cli.json配置
AngularCli的配置文件是根目录下的.angular-cli.json，而会影响文件体量的只有styles、scripts两个节点。
1、scripts
scripts节点最后会生成一个独立的scripts.bundle.js文件，一般我们会把一些外部非Angular组件的类库放置在这里，比如：jQuery。
"scripts":[ "../node_modules/jquery/dist/jquery.js", "../test.ts" ]
scripts节点还允许*.ts文件。
2、styles
styles节点最后会生成一个独立的styles.bundle.css文件。除此之外，组件内（styles或styleUrls）的样式会全部打包进.js文件中。
正如jQuery一样，如果我们需要引用第三方UI库，比如：bootstrap那么：
"styles":[ "../node_modules/bootstrap/scss/bootstrap.scss", "styles.scss" ]
默认情况引用的是./src/styles.scss，你可以继续导入外部其它外部样式文件。
@import"variables"; @import"nav"; @import"layout";
组件类样式
Angular组件内使用styles或styleUrls的样式会全部打包进相应模块的.js文件中；并且样式生成存储的方式是无法改变的。
encapsulation
顺带提一下。既然是Angular组件，如果说此时还需要外部的样式这显得有点框住组件独立性的特点，然而组件样式是否污染其它组件呢？我们通过指定encapsulation样式封装方式来改变这一些行为，它包括三个值：
- ViewEncapsulation.Emulated默认，采用额外添加一些_ngcontent属性来限定样式隔离
- ViewEncapsulation.Native采用ShadowDom隔离方式
- ViewEncapsulation.None不隔离
三、ngbuild指令
AngularCli会根据.angular-cli.json配置（apps/root、apps/main）决定从哪里开始启动。因此，当执行：
ngbuild--prod--build-optimizer
--build-optimizer从1.3.0-rc.5才开始支持。相比较之前Cli版本，Tree-Shaking力度更大，当然相应的文件大小也更轻。
会从根模块开始逐一对每一个模块进行打包，并保存在每一个文件当中。若采用路由迟延加载模块的话，会在inline.js中加上相应的动态加载脚本代码。
1、文件名哈希
AngularCli提供了--output-hashing参数，来指定文件名哈希模式，它包括四种：
| 模式 | 说明 |
|---|---|
| none | 不哈希 |
| all | 所有（若 --prod 时默认） |
| media | 限资源文件 |
| bundles | 限webpack打包后的js文件 |
注意：这里并不会哈希assets文件夹，因为该文件夹采用是直接复制的形式。
2、指定输出
Angular应用很多时候可能是放在现有WEB服务的某个目录下（例如：v2），因此，访问地址会变成：https://www.demo.com/v2。但会发现，无法加载应用；这是由index.html会包括一句：
倒置所有脚本资源的加载URL指向根目录。AngularCli提供一个参数改变该值。
ngbuild--prod--bh/v2/
往往在开发过程中总需要依赖一些图片资源的访问，倘若在代码中采用绝对路径，那就懵逼了，所以建议不要在代码中使用绝对路径访问资源文件。
四、优化方式
1、输出包体组成分析文件
Webpack有一个非常好用的工具叫webpack-bundle-analyzer，会自动分析包体组成结构，并以一种可视化的方式显示。
首先，生成stats.json包体组成结构的统计文件。
ngbuild--prod--stats-json
最后访问webpackanalyse导入生成的JSON文件即可。
利用可视化的视觉可以了解一些优化的细节。
2、Rollup摇树优化
所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉，但不会删除这些代码，所以就需要配合UglifyJs能够智能的移除这些未使用的代码。从而减少包体大小。
而Agnular应用是基于Typescript，因此AngularCli提供了一个叫AngularBuildOptimizer插件，将Typescript编译结果转化成更友好的UglifyJs版本。这样UglifyJs就能够更有效的移除那些未使用的代码。
AngularCli只需要加上--build-optimizer参数就可以，在一些情况下压缩的还是很厉害的。
ngbuild--prod--build-optimizer
3、导出Webpack配置
AngularCli是基于Webpack封闭的一个Angular命令行工具，但并不表示我们无法了解细节。
Webpack的核心是webpack.config.js文件，然后AngularCli构建的项目并看不到该文件。
但是可以透过ngeject（更多细节见wiki）转化成Webapck项目所需要的配置文件与运行配置指令。这时候会在根目录产生webpack.config.js文件。
不过，同时也会改变了package.json与.angular-cli.json的一些配置，若你只想查看Webpack配置信息，可以还原这些配置即可。
结论
本文只是日常做一次总结，都是一些网络中可以查阅到的知识，并无新意。而上面所有AngularCli相关命令，都可以在Wiki都有相应的描述。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。