简单谈谈关于Angular Cli打包的事

本文主要给大家介绍了关于Angular Cli打包的事，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

一、引言

Angular从开发再到生产环境部署都离不开Angular Cli工具集，而Angular Cli本质上是使用 Webpack（当前使用版本为2） 来打包资源。

Webpack 本身并不复杂，略用过一点都清楚，只需要创建一个 webpack.config.js 的文件并简单的配置，就可以把一个复杂的应用所有文件全部打包成若干静态资源文件。

然而一个复杂的应用免不了使用到第三方类库，当这些外部类库与自身业务脚本联系在一起时，就产生一个大家都关心的问题：性能优化。

Angular Cli在构建一个含有路由、表单、HTTP等基本的Angular应用大约在150KB左右，就Angular体量而言，自己写一个 Webpack 也很难能优化到这个大小。所以说，Angular Cli是很有良心的作品。然而极大的简化对 Webpack 的使用，何乐不为呢？

本文我将介绍Angular Cli的一些配置在生产环境中所产生的效果，希望能让大家由于一些不合理的行为可能会导致文件体量的上升在改善这一问题时有所帮助。

二、.angular-cli.json 配置

Angular Cli 的配置文件是根目录下的 .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 样式封装方式来改变这一些行为，它包括三个值：