Now, let’s have a look at the dist directory: the vendor JavaScript file has now been shrunk to 310kb, and using source-map-explorer we can see that the big compiler chunk is now gone: AoT runs the compile step during the build process instead of inside the browser, so when you build your project for production, the compiler can disappear completely from the output, saving precious CPU cycles when the page loads in the user’s browser. To check your Angular CLI version type:Īnd the compiler part will be magically removed, using a feature of angular called AoT (“Ahead of Time” compilation). You also need the latest Angular CLI (version 1.2.0 or newer). So now I present you with “A Deep, Deep, Deep, Deep, Deep Dive into the Angular Compiler!”Īs with many of my posts, I think it’s better if you can follow along as I go, and so before we get down to business, there are a few things you’ll need to have installed on your machine before we get started if you’d like to follow along:įirst, you’ll need node.js and npm (or yarn) installed on your system. Since I enjoyed the learning and tinkering process so much, I thought it would be good to share a little of what I learned in blog-form! Working through the compiler was a great experience, and I turned a lot of what I learned into my talk at ng-conf 2017: DiY Angular Compiler. As you know, I love Angular, and all the magical things you can do with it, and I thought it would be an interesting challenge to take a peek into the compiler in Angular 4, try to reverse engineer it, and simulate some part of the compilation process.
0 Comments
Leave a Reply. |