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


Posted in Javascript onSeptember 05, 2017

本文主要给大家介绍了关于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 样式封装方式来改变这一些行为,它包括三个值:

  • ViewEncapsulation.Emulated 默认,采用额外添加一些 _ngcontent 属性来限定样式隔离
  • ViewEncapsulation.Native 采用Shadow Dom隔离方式
  • ViewEncapsulation.None 不隔离

三、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 中加上相应的动态加载脚本代码。

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="/" rel="external nofollow" >

倒置所有脚本资源的加载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 都有相应的描述。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 #Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
纯js实现画一棵树的示例
Sep 05 #Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 #Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
对于Javascript 执行上下文的全面了解
Sep 05 #Javascript
JS一个简单的注册页面实例
Sep 05 #Javascript
You might like
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
js表单登陆验证示例
2016/10/19 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
基于python log取对数详解
2018/06/08 Python
Python对切片命名的实现方法
2018/10/16 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
请介绍一下WSDL的文档结构
2013/03/17 面试题
2016年春季运动会通讯稿
2015/11/25 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python