Microsoft
Web Performance with Webpack
1 hour, 43 minutes
CC
Course Description
Learn to solve the most common website performance issues with Sean Larkin, core maintainer of Webpack 4! You'll learn to build instant-loading websites by lazy loading your JavaScript with code splitting, removing unused code with tree shaking, and prefetching assets with magic comments. Webpack was created specifically for web performance and this course Sean will teach you how to use all of it's powerful performance optimization features!
Preview
Course Details
Published: July 1, 2018
Rating
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 300+ In-depth courses
- 24 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Web Performance
Section Duration: 17 minutes
Sean identifies the main cause of slow web page loading as the amount of JavaScript, CSS, and network requests on initial download.
Sean reviews goals that should be met in order to meet a high-performance application that loads fast on desktop & mobile as well as emerging markets.
Sean demonstrates how to determine code coverage, which shows how much code is used to render a page versus how much code was loaded.
Sean discusses the code splitting technique, which is a code Webpack feature. Code splitting is the process of splitting code into asynchronous chunks at build time.
Code Splitting
Section Duration: 58 minutes
After the discussing the importance of web performance, Sean reviews two types of code splitting, static and dynamic.
Sean demonstrates a simple code splitting example.
Sean walks through Webpack's runtime to illustrate how Webpack supports code splitting.
Sean examines how to load a library asynchronously through code splitting.
Sean reviews code splitting in popular frameworks noting that some frameworks view code splitting feature as a first-class citizen when other frameworks do not.
Sean answers a student question regarding the ability to lazy loading a named export.
Prompted by a question from a student on vendor bundles, Sean discusses the priority of reducing the smallest amount of code versus caching code.
Sean reviews dynamic code splitting, which is the loading of asynchronous bundle based on runtime conditions.
Sean walks through an example of dynamic code splitting.
Module Methods & Magic Comments
Section Duration: 28 minutes
Sean discusses magic comments, which is a process for naming the chunks corresponding to the modules/components being imported.
Sean reviews Webpack modes, which can determine how code splitting may occur.
Sean examines Webpack's native preload and prefetch support. This ability allows for non-critical assets to be loaded in the background during the browser's idle time so that they are ready when a user requests them creating a better user experience.
Sean delivers some final thoughts on code splitting.
Prompted by a student question, Sean reviews tips for setting up Webpack configuration.
Sean discusses the conditions when one might build a JavaScript library with Webpack.
Earn a Completion Certificate
After completing this course, you'll receive a certificate of completion that serves as proof of your achievement, showcasing your expertise, and commitment to professional development. You can easily share this certificate on your LinkedIn profile to highlight your new skills and demonstrate continuous learning to potential employers and professional connections.
