使用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高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
jquery拖动改变div大小
Jul 04 jQuery
一文搞懂redux在react中的初步用法
Jun 09 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函数utf8转gb2312编码
2006/12/21 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
详解vue v-model
2020/08/31 Javascript
python encode和decode的妙用
2009/09/02 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
快速入手Python字符编码
2016/08/03 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python实现指定ip端口扫描方式
2019/12/17 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
传媒专业推荐信范文
2013/11/23 职场文书
函授本科自我鉴定
2014/02/04 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
创业计划书之熟食店
2019/10/16 职场文书