Web Performance with Webpack
Table of Contents
Performance GoalsSean 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 CoverageSean demonstrates how to determine code coverage, which shows how much code is used to render a page versus how much code was loaded.
Code SplittingSean 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.
Types of Code SplittingAfter the discussing the importance of web performance, Sean reviews two types of code splitting, static and dynamic.
Code Splitting DemonstrationSean demonstrates a simple code splitting example.
Webpack Code Splitting Under the HoodSean walks through Webpack's runtime to illustrate how Webpack supports code splitting.
Load a Heavy Module AsynchronouslySean examines how to load a library asynchronously through code splitting.
Code Splitting in Vue, React, & FrameworksSean 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 ExportsSean answers a student question regarding the ability to lazy loading a named export.
Vendor Bundles are an Anti PatternPrompted 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 SplittingSean reviews dynamic code splitting, which is the loading of asynchronous bundle based on runtime conditions.
Dynamic Code Splitting WalkthroughSean walks through an example of dynamic code splitting.
Module Methods & Magic Comments
Introducing Magic CommentsSean discusses magic comments, which is a process for naming the chunks corresponding to the modules/components being imported.
Webpack ModesSean reviews Webpack modes, which can determine how code splitting may occur.
Webpack Prefetch & PreloadSean 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 SplittingSean delivers some final thoughts on code splitting.
Webpack Config OrganizationPrompted by a student question, Sean reviews tips for setting up Webpack configuration.