使用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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python动态视频下载器的实现方法
2019/09/16 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
求职毕业生自荐书
2014/02/08 职场文书
办公室副主任职责范本
2014/03/08 职场文书
平面设计求职信
2014/03/10 职场文书
幼儿园评语大全
2014/04/17 职场文书
小学课外阅读总结
2014/07/09 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
领导干部学习心得体会
2016/01/23 职场文书
了解Redis常见应用场景
2021/06/23 Redis
MongoDB支持的索引类型
2022/04/11 MongoDB