文档章节

说点Angular Cli打包的事

十万猛虎下画山
 十万猛虎下画山
发布于 2017/09/04 14:58
字数 1527
阅读 86
收藏 0
点赞 0
评论 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

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

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

局长 ⋅ 2017/12/07 ⋅ 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

如何解决 Android Studio 三方库依赖冲突问题

今天我们不继续说面试,讲点其他的,有一些废话,关注标题的请直接拉到下面。 近期呀,笔者除了整理 面试系列,其实还在做一件事,就是在费心费力地准备把 AiYaGirl 进行重构。 AiYaGirl 是一...

nanchen2251 ⋅ 2017/11/02 ⋅ 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 ⋅ 1

Wijmo 2016 V3 发布,前端控件集

快如闪电,触控优先的前端控件集Wijmo,正式发布2016年最后一次重大更新,2016V3版本在互操作性、图表和报表方面持续增强,经典的FlexGrid控件也新增了数据验证和页脚等实用功能,将为您的企...

葡萄城控件技术团队 ⋅ 2016/12/12 ⋅ 6

Cordova4知识点

1.MainActivity.java 这里是程序入口,主要是 loadUrl(launchUrl); 这里的url配置是在config.xml里面 <content src="setup/setup.html" /> 2.在自定义插件中extends CordovaPlugin Context m......

阿宇_ ⋅ 2015/08/13 ⋅ 0

在eclipse中查看调试hibernate、struts等源码

以hibernate为例 1、首先到这里下载一个版本的hibernate,http://sourceforge.net/projects/hibernate/files/。 2、解压后,似乎找不到源码。别急。到这个目录里hibernate-distribution-3.3....

叶大侠 ⋅ 2012/01/11 ⋅ 0

React.js入门必须知道的那些事

首先,react的官网:https://facebook.github.io/react/ react中文网更新速度比较慢,建议还是看英文官网来学。起步还是比较容易的,语法也比较好理解。但是,这里面也有一些地方需要特别注意...

LuckyWinty ⋅ 2016/03/21 ⋅ 0

如何将app迭代新版本提交到iTunes Connect审核

注意:这里仅指迭代新版本。而且你先在iTunes Connect构建好新的版本,包括图片啊,更新内容等。 由于iOS搭档离职,我也有一年多没碰过上传app store这一块了。最近要上传一个大版本,表示?...

大_瓶_子 ⋅ 2017/02/28 ⋅ 0

数字资产系统开发挖矿系统平台搭建的矿池基本职能

对于我们数字资产系统开发(+V信ruiec2723)技术来说,开发出来的数字资产又要涉及到挖矿系统平台搭建的流程。对于我们的挖矿平台也少不了去依托于一个矿池。矿池从简单一点的说法也就是集合...

数字资产先生 ⋅ 05/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 59分钟前 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部