使用Angular CLI进行Build(构建)和Serve详解


Posted in Javascript onMarch 24, 2018

第一篇文章是: "使用angular cli生成angular5项目" :https://3water.com/article/136621.htm

第二篇文章是: "使用angular cli从蓝本生成代码" :https://3water.com/article/137031.htm

第三篇文章是: "使用Angular CLI生成路由" :https://3water.com/article/137033.htm

Build.

Build主要会做以下动作:

  1. 编译项目文件并输出到某个目录
  2. Build targets决定了输出的结果
  3. bundling 打包
  4. 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉)

ng build.

可以先看帮助:

ng build --help

针对开发环境, 就是用命令 ng build.

默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录.

build之后会看见dist里面有这些文件:

  1. inline.bundle.js 这是webpack的运行时.
  2. main.bundle.js 就是程序代码.
  3. pollyfills.bundle.js 就是浏览器的Pollyfills.
  4. styles.bundle.js 样式
  5. vendor.bundle.js 是angular和第三方库

可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面.

首先修改上一个例子中的代码:

使用Angular CLI进行Build(构建)和Serve详解

执行ng build:

使用Angular CLI进行Build(构建)和Serve详解

使用Angular CLI进行Build(构建)和Serve详解

可以看到生成了这些文件.

把dist里面的index.html格式化一下看看:

使用Angular CLI进行Build(构建)和Serve详解

可以看到它引用了生成的5个js文件.

打开main.bundle.js可以看到我写的代码:

使用Angular CLI进行Build(构建)和Serve详解

下面运行程序: ng serve -o:

使用Angular CLI进行Build(构建)和Serve详解

可以看到在ng serve的时候, 加载了上述的文件.

因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的.

这时看一下文件目录, 并没有dist目录:

使用Angular CLI进行Build(构建)和Serve详解

那么这些文件是怎么被serve的呢?

这是因为, 这时候webpack是在内存中进行的serve.

下面使用source-map-explorer进行分析, 首先安装它:

npm install --save-dev source-map-explorer

然后执行 ng build, 再执行:

.\node_modules\.bin\source-map-explorer dist\main.bundle.js

结果会生成这个图形:

使用Angular CLI进行Build(构建)和Serve详解

再看看vendor.bundle的情况:

.\node_modules\.bin\source-map-explorer dist\vendor.bundle.js

使用Angular CLI进行Build(构建)和Serve详解

这里面东西就比较多了.

Build Targets和Environment.

Environment是指采用哪一个环境文件:

使用Angular CLI进行Build(构建)和Serve详解

而Targets则是用来决定项目文件是如何被优化的.

看一下开发和生产build的对比.

ng build ng build --prod
Environment environment.ts environment..prod.ts
缓存 只缓存css里引用的图片 所有build的文件
source maps 生成  不生成
如何处理css 全局css输出到js文件 生成的是css文件
uglify
Tree-Shaking 不去掉无用代码 去掉无用代码
AOT
Bundling打包
--build-optimizer 是(和AOT以及Angular5)
--named-chunks
--output-hashing media 所有

下面命令都是针对开发时的build, 它们的作用是一样的:

ng build
ng build --dev
ng build --dev -e=dev
ng build --target=development --environment=dev

下面则是生产build:

ng build --prod
ng build --prod -e=prod
ng build --target=production --environment=prod

其它常用的参数还有:

  1. --sourcemap -sm 生成source map
  2. --aot Ahead of Time编译
  3. --watch -w Watch并rebuild
  4. --environment -e Build环境
  5. --target -t Build target
  6. --dev 表示dev env和target
  7. --prod 表示prod env和target

Production Build.

先使用--aot:

ng build --aot

使用Angular CLI进行Build(构建)和Serve详解

使用aot之后可以看到 vendor.bundle的大小降了很多, 只有1.5m左右了.

执行aot会去掉一些程序执行不需要的代码, 例如angular的compiler这时就不在build输出的文件里了(可以使用source-map-explorer查看).

试试生产环境:

ng build --prod

使用Angular CLI进行Build(构建)和Serve详解

可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk true给弄出来).

Serve.

ng serve. 已经一直在用了, 下面看看它常用的参数:

  1. --open -o 打开默认浏览器
  2. --port -p 端口
  3. --live-reload -lr 发生变化时重新加载网页(默认开启的)
  4. --ssl 使用https
  5. --proxy-config -pc 代理配置
  6. --prod 在内存中serve 生产模式build的文件

试试 --prod:

ng serve --prod

使用Angular CLI进行Build(构建)和Serve详解

通过文件大小可以看出确实是prod build的.

ng eject.

为项目生成webpack配置和脚本.

执行该命令试试:

使用Angular CLI进行Build(构建)和Serve详解

看看有哪些变化:

.angular-cli.json:

使用Angular CLI进行Build(构建)和Serve详解

package.json:

使用Angular CLI进行Build(构建)和Serve详解

命令脚本都变了

使用Angular CLI进行Build(构建)和Serve详解

还多出来一个webpack.config.js文件:

使用Angular CLI进行Build(构建)和Serve详解

为什么要这么做呢?

可以对项目更深入的配置....

这时运行程序就是 npm start了.

我还是把reject恢复回去吧, 使用git来恢复吧.

如果需要Serve 其他js/css/assets文件:

使用Angular CLI进行Build(构建)和Serve详解

放在.angular-cli.json就行, 例如jquery就应该放在scripts里面.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
使用Angular CLI生成路由的方法
Mar 24 #Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 #Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
Webpack 之 babel-loader文件预处理器详解
Mar 23 #Javascript
You might like
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
js实现select下拉框菜单
2015/12/08 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
js实现搜索栏效果
2018/11/16 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
django 取消csrf限制的实例
2020/03/13 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
科技节口号
2014/06/19 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Python自动化测试PO模型封装过程详解
2021/06/22 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript