使用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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
js中substring和substr的定义和用法
May 05 Javascript
实现无刷新联动例子汇总
May 20 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
简单实现JS计算器功能
Dec 21 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
星际流派综述
2020/03/04 星际争霸
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
python实现手机通讯录搜索功能
2018/02/22 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
Python之Sklearn使用入门教程
2021/02/19 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
如何写好开幕词?
2019/06/24 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python