 Hello, everyone. My name is Mikhail Gachev. I'm a senior developer programs engineer in the Angular team at Google. Today, I'm going to show you a couple of tools that we have been working on to help you build fast Angular applications. In the presentation today, we're going to look into an existing app and optimize it by going through three steps. First, we'll introduce call splitting. After that, bundle preloading. And finally, we will deploy the app to production with a single command following best serving practices. First things first, let us look at our existing app. As any Angular application, we can run it by using the ng-serve command. Now we can open the app and Chrome DevTools into the browser. Let us navigate to all the pages in the app while DevTools tracks the network activity. As the next step, we can open the network tab of Chrome DevTools. Notice that the only network request there is triggered by the image from the first page we navigate it to. This means that during the initial app load time, we're downloading the JavaScript associated with all pages, although the user needs only a subset of it. This is a good opportunity to introduce call splitting. In Angular CLI 8.1, we added a lazy module generator. It accepts a module name, a route name, and a parent module name. Let us use it to move the about page into its own JavaScript chunk. All we need to do is run ng-g for generate, m for module, with a name about, route name about, and parent module app. This command generated a definition of an ng module, declaration of a lazy route, declaration of a default route in the lazy module, and a component that the default route will render. Now let us go to VS Code to remove the eager route and switch to the newly generated lazy one. First, let us remove the eager route itself. Next, we can delete the eager component import and declaration. As the next step, let us move the definition of the eagerly rendered component to the lazily rendered one. Finally, let us remove the files we're not going to use for this particular example, as well as the eagerly rendered about component. Now we can preview the result in the browser. Notice that the navigation to the about page triggered a network request which downloaded the about module. We improved the initial app lost time by the link scripts which are not immediately needed by the user. This, however, may introduce latency when navigating across pages. A technique that can help us to fix this is bundle preloading. As the next step, we can install the ngx quick link module and save it into our dependencies. ngx quick link is a preloading strategy that will detect when a router link is visible in the viewport. It will wait until the browser is idle and prefetch it unless the user's browser is in data saving mode. To introduce quick link to our app, we first need to import the quick link module and add it to the list of imports in the app ng module. After that, we need to import the quick link strategy and add it as the preloading strategy of the Angular router. To observe the result, let's go back to Chrome. Notice that when we open the site navigation, in the background Angular downloads the about module. Finally, let us deploy the app to production following best serving practices. In the console, we can type ng at Angular slash fire. This command will install Firebase tools and perform a couple of transformations on top of our project. If we are authenticated to Firebase, it will also fetch our project list and allow us to select one by using fuzzy search. With the latest deployment capabilities in the Angular CLI 8.3, we can add a package from a cloud provider and run the command ng deploy to push our project to the cloud. Now, let us run ng deploy in the terminal. It will first build our app performing the most optimal build possible. After that, upload the production assets to Firebase hosting. Finally, it will output a URL that we can use to directly preview the deployment. The cloud platforms with direct support for Angular CLI are Google Cloud and Firebase, Azure, and Zyte. Community partners also implemented support for GitHub pages, Netlify, and directly publishing libraries to NPM. In this video, we looked into three simple optimization techniques. First, we introduced call splitting to our app by using the Angular CLI and Schematics. After that, with ngx quick link, we added efficient prefetching of chunks associated with visible links in the viewport. Finally, we deployed the app to Firebase hosting, enabling best-serving practices, such as CDN and content compression. You can learn more about all of these techniques at web.dev.s-angular. Thank you for watching. [? music playing ?]