Web Performance with Webpack

Table of Contents

• 

  Top Performance Issues

  00:00:00 - 00:02:32 View Transcript

  Sean identifies the main cause of slow web page loading as the amount of JavaScript, CSS, and network requests on initial download.
• 

  Performance Goals

  00:02:33 - 00:05:13 View Transcript

  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

  00:05:14 - 00:13:18 View Transcript

  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

  00:13:19 - 00:17:03 View Transcript

  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.

• 

  Types of Code Splitting

  00:17:04 - 00:21:14 View Transcript

  After the discussing the importance of web performance, Sean reviews two types of code splitting, static and dynamic.
• 

  Code Splitting Demonstration

  00:21:15 - 00:29:34 View Transcript

  Sean demonstrates a simple code splitting example.
• 

  Webpack Code Splitting Under the Hood

  00:29:35 - 00:38:04 View Transcript

  Sean walks through Webpack's runtime to illustrate how Webpack supports code splitting.
• 

  Load a Heavy Module Asynchronously

  00:38:05 - 00:44:45 View Transcript

  Sean examines how to load a library asynchronously through code splitting.
• 

  Code Splitting in Vue, React, & Frameworks

  00:44:46 - 00:53:21 View Transcript

  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

  00:53:22 - 00:56:22 View Transcript

  Sean answers a student question regarding the ability to lazy loading a named export.
• 

  Vendor Bundles are an Anti Pattern

  00:56:23 - 00:59:02 View Transcript

  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

  00:59:03 - 01:03:56 View Transcript

  Sean reviews dynamic code splitting, which is the loading of asynchronous bundle based on runtime conditions.
• 

  Dynamic Code Splitting Walkthrough

  01:03:57 - 01:15:42 View Transcript

  Sean walks through an example of dynamic code splitting.

• 

  Introducing Magic Comments

  01:15:43 - 01:21:52 View Transcript

  Sean discusses magic comments, which is a process for naming the chunks corresponding to the modules/components being imported.
• 

  Webpack Modes

  01:21:53 - 01:27:30 View Transcript

  Sean reviews Webpack modes, which can determine how code splitting may occur.
• 

  Webpack Prefetch & Preload

  01:27:31 - 01:36:05 View Transcript

  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

  01:36:06 - 01:38:16 View Transcript

  Sean delivers some final thoughts on code splitting.
• 

  Webpack Config Organization

  01:38:17 - 01:41:05 View Transcript

  Prompted by a student question, Sean reviews tips for setting up Webpack configuration.
• 

  Building Your Library with Webpack

  01:41:06 - 01:43:48 View Transcript

  Sean discusses the conditions when one might build a JavaScript library with Webpack.