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. SpringBoot-了解微服务(二)

    什么是微服务? 微服务是一种架构风格,它要求我们在开发一个应用的时候,这个应用必须构建成一系列小服务的组合: 可以通过http的方式进行互通. 要说微服务架构,先了解一下以前的单体应用架构 单体应用架 ...

  2. 入门级实操教程!从概念到部署,全方位了解K8S Ingress!

    Kubernetes Ingress用于添加规则,以将流量从外部路由到Kubernetes集群的服务中.在本文中你将了解ingress 的概念,以及用于路由外部流量到Kubernetes deploy ...

  3. 微信小程序 buton清除默认样式

    相信很多小伙伴在开发小程序的时候都会碰到小程序Button默认样式的困扰,在重设样式的时候需要一次次的设置 分享一个自己在开发中的小方法: CSS all 简写属性 将除 unicode-bidi 与 ...

  4. ARTS-S python抽象方法抽象类

    # coding: utf-8 from abc import ABC, abstractmethod class AbstractClassExample(ABC): def __init__(se ...

  5. Neety的基础使用及说明

    BIO(缺乏弹性伸缩能力,并发量小,容易出现内存溢出,出现宕机 每一个客户端对应一个线程 伪异步IO:创建线程池,由线程池里边的线程负责连接处理,M个个请求进来时,会在线程池创建N个线程.容易出现线程 ...

  6. exports、module.exports 和 export、export default

    先了解他们的使用范围. require: node 和 es6 都支持的引入export / import : 只有es6 支持的导出引入module.exports / exports: 只有 no ...

  7. LiteByte教程

    转载请标明原文地址:https://www.cnblogs.com/zhangyukof/p/12073041.html 简介 LiteByte是一种轻量级的二进制数据交换格式.体积小巧.简单易用是设 ...

  8. SpringBoot整合axis1.4后,@Autowired注入失败,使用工具类注入

    问题描述: 费劲心思搭建好webservices服务端后,没想到客户端调用失败,查看日志文件,发现报空指针异常,debug代码后,发现sql查询的值都是null.通常情况下,我们将Dao注入Servi ...

  9. elasticsearch7.5.0+kibana-7.5.0+cerebro-0.8.5集群生产环境安装配置及通过elasticsearch-migration工具做新老集群数据迁移

    一.服务器准备 目前有两台128G内存服务器,故准备每台启动两个es实例,再加一台虚机,共五个节点,保证down一台服务器两个节点数据不受影响. 二.系统初始化 参见我上一篇kafka系统初始化:ht ...

  10. 函数式响应式编程 - Functional Reactive Programming

    我们略过概念,直接看函数式响应式编程解决了什么问题. 从下面这个例子展开: 两个密码输入框,一个提交按钮. 密码.确认密码都填写并一致,允许提交:不一致提示错误. HTML 如下: <input ...