angular jit and aot

为什么需要编译
应用中包含的组件、HTML模板(比如:@、@、@、@Pipe)很多都是JS VM无法解析的,所以在浏览器渲染应用之前,组件和模板必须要被编译器转换为可以执行的 。
编译模式
在2 中有两种编译模式:
JIT事件流:
开发流程:
用户打开浏览器,他将经历以下步骤 (没有严格的CSP):
AOT事件流:
构建压缩部署
用户打开浏览器,他将经历以下步骤:
aot将的过程放在应用部署前,所以浏览器端承载的工作量就会大幅度减少,相应的页面加载时间也会大幅度减少,这也就意味着更快更好的用户体验 。
JIT vs AOT: 编译方式编译时机构建速度打包大小性能/渲染速度模板错误检查时间安全性
JIT
app运行时

angular jit and aot

文章插图
app运行时

AOT
app构建阶段

更快
【angular jit and aot】app构建阶段

AOT优势:
JIT优势:
编译时间短,除非确实有动态组件的需求,否则jit唯一的优势就是能用来做在线 Demo和开发调试,参考知乎答案
懒加载
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载
在单页面应用中,如果没有应用懒加载,进入首页时会导致需要加载的内容过多,延时过长,不利于用户体验
运用懒加载将页面进行划分,按需加载页面,可以分担首页所承担的加载压力,减少加载用时
如果对首屏启动有更严格的要求,最好采用服务端渲染
懒加载可以参考官方文档
摇树优化:
作用:消除 code
原理:通过跟踪和语句进行静态分析,排除那些被导出过但又从未被导入的代码(ES6的静态特性)
目前大部分工具只能对模块摇树,因为那里有和语句,所以需要将ts编译成(通过配置实现)
的摇树和摇树区别可以参考知乎上这个回答
注意事项
项目目前使用的是,总结了下开发过程中遇到的坑:
AOT注意事项
由于AoT的特性,部分在JIT模式下可用的方法在AoT下是不可行或者官方不建议的,开发代码的童鞋在aot模式下需要注意额外注意这些情况,上8000+star的-工程总结如下(英文捉急,就不在这献丑翻译了):
补充一些我们项目开发过程中遇到的问题,O(∩_∩)O 都是开发时代码不规范埋下的坑:
总结
推荐大家在dev时使用jit可以提高开发调试效率,在prod时使用aot
参考: