使用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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
通过代码实例了解Python异常本质
2020/09/16 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
二年级数学教学反思
2014/01/21 职场文书
开业庆典主持词
2014/03/21 职场文书
初中英语演讲稿
2014/04/29 职场文书
大学新闻系自荐书
2014/05/31 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
导游词之无锡唐城
2019/12/12 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
MySQL自定义函数及触发器
2022/08/05 MySQL