Angular 应用主要由组件及其 HTML 模板组成。由于浏览器无法直接理解 Angular 所提供的组件和模板,因此 Angular 应用程序需要先进行编译才能在浏览器中运行。Angular 提供了

两种方式来编译angular应用程序:

  1. 即时编译 (JIT,Just in time),它会在运行期间在浏览器中编译你的应用。

  2. 预先编译(AOT,Ahead of time),它会在构建时编译你的应用。

注:当你运行 ng build(仅编译)或 ng serve(编译并启动本地服务器) 这两个 CLI 命令时 JIT 编译是默认选项;要进行 AOT 编译,只要让 ng build 或 ng serve 命令中包含 --aot 标志。

带有 --prod 标志的 ng build 命令 (ng build --prod) 会默认使用 AOT 编译。

一:AOT:在浏览器下载和运行代码之前的编译阶段,Angular 预先(AOT)编译器会先把你的 Angular HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。好处如下:

  1. 渲染得更快:使用 AOT浏览器下载预编译版本的应用程序。 浏览器直接加载运行代码,所以它可以立即渲染该应用,而不用等应用完成首次编译;
  2. 需要的异步请求更少:编译器把外部 HTML 模板和 CSS 样式表内联到了该应用的 JavaScript 中。 消除了用来下载那些源文件的 Ajax 请求;
  3. 需要下载的 Angular 框架体积更小:如果应用已经编译过了,自然不需要再下载 Angular 编译器了。 该编译器差不多占了 Angular 自身体积的一半儿,所以,省略它可以显著减小应用的体积;
  4. 提早检测模板错误:AOT 编译器在构建过程中检测和报告模板绑定错误,避免用户遇到这些错误;
  5. 更安全:AOT 方式会在发给客户端之前就把 HTML 模板和组件编译成 JavaScript 文件。 不需要读取模板,也没有客户端组装 HTML 或执行 JavaScript 的危险操作,受到注入类攻击的机会也比较少。

Angular--AOT和JIT两种编译方式带来的改变的更多相关文章

  1. AOT和JIT以及混合编译的区别、优劣

    AOT,JIT是什么? JIT,即Just-in-time,动态(即时)编译,边运行边编译: AOT,Ahead Of Time,指运行前编译,是两种程序的编译方式 区别 这两种编译方式的主要区别在于 ...

  2. Java三种编译方式

    Java程序代码需要编译后才能在虚拟机中运行,编译涉及到非常多的知识层面:编译原理.语言规范.虚拟机规范.本地机器码优化等:了解编译过程有利于了解整个Java运行机制,不仅可以使得我们编写出更优秀的代 ...

  3. 两种include方式及filter中的dispatcher解析

    两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...

  4. Java中String对象两种赋值方式的区别

    本文修改于:https://www.zhihu.com/question/29884421/answer/113785601 前言:在java中,String有两种赋值方式,第一种是通过“字面量”赋值 ...

  5. Nginx 的两种认证方式

    简介: 今天来研究一下 Nginx 的两种认证方式. 1.auth_basic 本机认证 2.ngx_http_auth_request_module 第三方认证 一.安装 Nginx shell & ...

  6. java的两种同步方式, Synchronized与ReentrantLock的区别

    java在编写多线程程序时,为了保证线程安全,需要对数据同步,经常用到两种同步方式就是Synchronized和重入锁ReentrantLock. 相似点: 这两种同步方式有很多相似之处,它们都是加锁 ...

  7. wdcp支持两种安装方式

    v3.2版本已发布,支持多PHP版本共存共用,支持SSL证书,更多可看论坛 v3版讨论区 更多安装说明请看 http://www.wdlinux.cn/bbs/thread-57643-1-1.htm ...

  8. WCF全双工通信实例分享(wsDualHttpBinding、netTcpBinding两种实现方式)

    最近在研究WCF通信,如果没有接触过的可以看我的前一篇文章:https://www.cnblogs.com/xiaomengshan/p/11159266.html 主要讲的最基础的basicHttp ...

  9. python常有模块:模块、引入语法、两种执行方式、模块搜索顺序

    今天主要讲了以下几点:一.模块三问.定义及分类二.import和from的语法三.文件的两种执行方式及搜索顺序四.内置函数 一.模块.import和from的语法 1.什么是模块   模块是一堆功能函 ...

随机推荐

  1. Centos7使用Yum安装高版本的LNMP

    [摘要] 本文旨在介绍使用yum的方式安装一些高版本的NGINX.MySQL.PHP服务.当然如果觉得红帽给的就够用,就用红帽给的就行. 在红帽系列的Linux操作系统中,nginx/mysql/ph ...

  2. angularJS使用ocLazyLoad实现js延迟加载

    最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器.关键问题在于必须要在片段加载后通过js与dom元素进行绑定.一开始想当然以为直接 ...

  3. luogu P1901 发射站

    题目描述 某地有 N 个能量发射站排成一行,每个发射站 i 都有不相同的高度 Hi,并能向两边(当 然两端的只能向一边)同时发射能量值为 Vi 的能量,并且发出的能量只被两边最近的且比 它高的发射站接 ...

  4. mininet(二)简单的路由实验

    mininet(一)实验环境搭建 mininet(二)简单的路由实验 mininet(三)简单的NAT实验 在网上找了 好几个代码都是不能直接复现成功,这里把自己实现成功的代码给大家演示一下. 实验的 ...

  5. 2019 ICPC上海网络赛 A 题 Lightning Routing I (动态维护树的直径)

    题目: 给定一棵树, 带边权. 现在有2种操作: 1.修改第i条边的权值. 2.询问u到其他一个任意点的最大距离是多少. 题解: 树的直径可以通过两次 dfs() 的方法求得.换句话说,到任意点最远的 ...

  6. 用.NET模拟天体运动

    用.NET模拟天体运动 这将是一篇罕见而偏极客的文章. 我上大学时就见过一些模拟太阳系等天体运动的软件和网站,觉得非常酷炫,比如这个(http://www.astronoo.com/en/articl ...

  7. Vue单页面应用打包app处理返回按钮

    情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...

  8. Vue-兄弟组件传值

    学习博客:https://www.jianshu.com/p/b10b3ac3729a

  9. SpringSpringBoot上传文件到七牛云

    准备工作 maven pom.xml添加七牛云的sdk依赖 <dependency> <groupId>com.qiniu</groupId> <artifa ...

  10. shell 100

    1.编写hello world脚本 #!/bin/bash# 编写hello world脚本 echo "Hello World!"2.通过位置变量创建 Linux 系统账户及密码 ...