说点Angular Cli打包的事

1、引言

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

Webpack 自己并不复杂，略用过一点都清楚，只须要建立一个 webpack.config.js 的文件并简单的配置，就能够把一个复杂的应用全部文件所有打包成若干静态资源文件。

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

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

本文我将介绍Angular Cli的一些配置在生产环境中所产生的效果，但愿能让你们因为一些不合理的行为可能会致使文件体量的上升在改善这一问题时有所帮助。

2、.angular-cli.json 配置

Angular Cli 的配置文件是根目录下的 .angular-cli.json，而会影响文件体量的只有 styles、scripts 两个节点。

一、scripts

scripts 节点最后会生成一个独立的 scripts.bundle.js 文件，通常咱们会把一些外部非Angular组件的类库放置在这里，好比：jQuery。

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../test.ts"
]

scripts 节点还容许 *.ts 文件。

二、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 采用Shadow Dom隔离方式
• ViewEncapsulation.None 不隔离

3、ng build 指令

Angular Cli 会根据 .angular-cli.json 配置（apps/root、apps/main）决定从哪里开始启动。所以，当执行：

ng build --prod  --build-optimizer

--build-optimizer 从 1.3.0-rc.5 才开始支持。相比较以前 Cli 版本，Tree-Shaking 力度更大，固然相应的文件大小也更轻。

会从根模块开始逐一对每个模块进行打包，并保存在每个文件当中。若采用路由迟延加载模块的话，会在 inline.js 中加上相应的动态加载脚本代码。

一、文件名哈希

Angular Cli 提供了 --output-hashing 参数，来指定文件名哈希模式，它包括四种：

模式	说明
none	不哈希
all	全部（若 --prod 时默认）
media	限资源文件
bundles	限webpack打包后的js文件

注意：这里并不会哈希 assets 文件夹，由于该文件夹采用是直接复制的形式。

二、指定输出

Angular应用不少时候多是放在现有WEB服务的某个目录下（例如：v2），所以，访问地址会变成：https://www.demo.com/v2。但会发现，没法加载应用；这是由 index.html 会包括一句：

<base href="/">

倒置全部脚本资源的加载URL指向根目录。Angular Cli 提供一个参数改变该值。

ng build --prod --bh /v2/

每每在开发过程当中总须要依赖一些图片资源的访问，假若在代码中采用绝对路径，那就懵逼了，因此建议不要在代码中使用绝对路径访问资源文件。

4、优化方式

一、输出包体组成分析文件

Webpack 有一个很是好用的工具叫 webpack-bundle-analyzer，会自动分析包体组成结构，并以一种可视化的方式显示。

首先，生成 stats.json 包体组成结构的统计文件。

ng build --prod --stats-json

最后访问 webpack analyse 导入生成的JSON文件便可。

利用可视化的视觉能够了解一些优化的细节。

二、Rollup 摇树优化

所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉，但不会删除这些代码，因此就须要配合 UglifyJs 可以智能的移除这些未使用的代码。从而减小包体大小。

而Agnular应用是基于Typescript，所以Angular Cli提供了一个叫 Angular Build Optimizer 插件，将 Typescript 编译结果转化成更友好的UglifyJs版本。这样UglifyJs就可以更有效的移除那些未使用的代码。

Angular Cli只须要加上 --build-optimizer 参数就能够，在一些状况下压缩的仍是很厉害的。

ng build --prod --build-optimizer

三、导出Webpack配置

Angular Cli 是基于 Webpack 封闭的一个Angular命令行工具，但并不表示咱们没法了解细节。

Webpack 的核心是 webpack.config.js 文件，而后 Angular Cli 构建的项目并看不到该文件。

可是能够透过 ng eject （更多细节见wiki） 转化成 Webapck 项目所须要的配置文件与运行配置指令。这时候会在根目录产生 webpack.config.js 文件。

不过，同时也会改变了 package.json 与 .angular-cli.json 的一些配置，若你只想查看 Webpack 配置信息，能够还原这些配置便可。

结论

本文只是平常作一次总结，都是一些网络中能够查阅到的知识，并没有新意。而上面全部 Angular Cli 相关命令，均可以在 Wiki 都有相应的描述。

Happy coding!