文档章节

说点Angular Cli打包的事

十万猛虎下画山
 十万猛虎下画山
发布于 2017/09/04 14:58
字数 1527
阅读 97
收藏 0

一、引言

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,而会影响文件体量的只有 stylesscripts 两个节点。

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

三、ng build 指令

Angular Cli 会根据 .angular-cli.json 配置(apps/rootapps/main)决定从哪里开始启动。因此,当执行:

ng build --prod --build-optimizer

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

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

1、文件名哈希

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

模式 说明
none 不哈希
all 所有(若 --prod 时默认)
media 限资源文件
bundles 限webpack打包后的js文件

注意:这里并不会哈希 assets 文件夹,因为该文件夹采用是直接复制的形式。

2、指定输出

Angular应用很多时候可能是放在现有WEB服务的某个目录下(例如:v2),因此,访问地址会变成:https://www.demo.com/v2。但会发现,无法加载应用;这是由 index.html 会包括一句:

<base href="/">

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

ng build --prod --bh /v2/

往往在开发过程中总需要依赖一些图片资源的访问,倘若在代码中采用绝对路径,那就懵逼了,所以建议不要在代码中使用绝对路径访问资源文件

四、优化方式

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

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

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

ng build --prod --stats-json

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

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

2、Rollup 摇树优化

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

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

Angular Cli只需要加上 --build-optimizer 参数就可以,在一些情况下压缩的还是很厉害的。

ng build --prod --build-optimizer

3、导出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!

本文转载自:https://segmentfault.com/a/1190000010981919

共有 人打赏支持
十万猛虎下画山
粉丝 4
博文 102
码字总数 71679
作品 0
西城
程序员
私信 提问
通往 Angular 6 的道路上:5.1.0 的开发到达新阶段

Angular 5 正式版已于上个月发布。Angular 5 的目标一如既往的是继续开发团队的重心工作:使 Angular 更小、更快且更易使用。当然我们也是一如既往的惊讶于 Angular 的发布频率,虽然这对于 ...

局长
2017/12/07
1K
9
使用Angular CLI生成路由

第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: "使用angular cli从蓝本生成代码" : http://www.cnblogs.com/cgzl/p/86054......

solenovex
03/20
0
0
angular4用angularcli构建后添加bootstrap

初学angular4,使用angularcli构建,添加了bootstrap后为什么样式无效,已经在angular.cli.json文件中添加 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.......

yxr-9213
2017/09/24
39
1
Mr成/ngx-watcher

ngx-watcher 基于angular6实现数据变化监听的service 安装 npm install ngx-watcher --save 配置 对于angular6项目不需要配置, Ok! 对于angular4,angular5 配置文件 @NgModule({...provider...

Mr成
08/13
0
0
基于 Angular6 的数据变化监听服务 - ngx-watcher

ngx-watcher 基于angular6实现数据变化监听的service 安装 npm install ngx-watcher --save 配置 对于angular6项目不需要配置, Ok! 对于angular4,angular5 配置文件 @NgModule({ ... provid...

不愿透露姓名的Mr成
08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0
技术工坊|如何开发一款以太坊钱包(深圳)

【好消息!】HiBlock区块链技术工坊已经成功举办了26期,其中北京1期,西安1期,成都2期,上海22期。经常有社区的小伙伴问定期举办技术工坊的除了上海以外,其他城市有没有?现在区块链技术工...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部