AngularThe compiler is divided into four steps,

There have been three major changes

Angular2 Template Compiler (2016)

  • The generated template was too long, too many bytes were added, and the package was too large

Angular4 ViewEngine Compiler (2017)

It generates a data structure that is passed to the Angular interpreter at run time

  • Converting templates to data structures, traversing the data interface performs DOM node update detection, but traversing costs performance
  • The NPM package is difficult to publish, and the metadata.json file must be generated using NGC traversal
  • Generated files are different, easy to read
  • If the component changes, its dependencies are recompiled
  • Bad for tree shaking optimization

Angular4 generates four types of files when compiled

  • *.metadata.json: Record the decorator information and constructor dependency injection information in the.ts(Component, NgMdule) file as JSON and retrieve it directly from json for the second compilation. A secondary compilation is a guide to using a third party library that needs to be recompiled for your own project
  • *.ngFactory.js: contains code for creating components, rendering components involving DOM operations, performing change simplification checks (to get oldValue versus newValue comparisons), and destroying components
  • *.js: the contents of the.ts(Component /NgModule) file other than decorator and constructor are compiled into ES6 code
  • *.ngsummary.json: same as metadata.json

Angular8 LVY Compiler (2018) (Tree shaking, Flexibility)

  • Dynamic components are easier to use
  • Incremental DOM
  • Packaging compiles faster and packages are smaller
  • TypeCheck is more complete
  • Not generate metadata. Json, ngfactory. Js
  • Easy to bug
  • Dynamic components are more convenient

Virtual DOM & Incremental DOM

When the Virtual DOM is initialized through JS, it simulates the real DOM node and generates a “Virtual DOM”. This Virtual DOM has many fewer properties than the real DOM, but it also adds a static property. Compare with grade, get the result, will get the difference, these differences are divided into several kinds =”