Table of Contents
Web Performance
Top Performance Issues
Sean identifies the main cause of slow web page loading as the amount of JavaScript, CSS, and network requests on initial download.
Performance Goals
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.
Code Coverage
Sean demonstrates how to determine code coverage, which shows how much code is used to render a page versus how much code was loaded.
Code Splitting
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
Types of Code Splitting
After the discussing the importance of web performance, Sean reviews two types of code splitting, static and dynamic.
Code Splitting Demonstration
Sean demonstrates a simple code splitting example.
Webpack Code Splitting Under the Hood
Sean walks through Webpack's runtime to illustrate how Webpack supports code splitting.
Load a Heavy Module Asynchronously
Sean examines how to load a library asynchronously through code splitting.
Code Splitting in Vue, React, & Frameworks
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.
Code Splitting Named Exports
Sean answers a student question regarding the ability to lazy loading a named export.
Vendor Bundles are an Anti Pattern
Prompted by a question from a student on vendor bundles, Sean discusses the priority of reducing the smallest amount of code versus caching code.
Dynamic Code Splitting
Sean reviews dynamic code splitting, which is the loading of asynchronous bundle based on runtime conditions.
Dynamic Code Splitting Walkthrough
Sean walks through an example of dynamic code splitting.
Module Methods & Magic Comments
Introducing Magic Comments
Sean discusses magic comments, which is a process for naming the chunks corresponding to the modules/components being imported.
Webpack Modes
Sean reviews Webpack modes, which can determine how code splitting may occur.
Webpack Prefetch & Preload
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.
Wrapping Up Code Splitting
Sean delivers some final thoughts on code splitting.
Webpack Config Organization
Prompted by a student question, Sean reviews tips for setting up Webpack configuration.
Building Your Library with Webpack
Sean discusses the conditions when one might build a JavaScript library with Webpack.