Make your web app faster with webpack code splitting
Channel: vaadinofficial
Date: 28/10/2020

In this week's Vaadin Tips, Marcus covers how you can use webpack code splitting to speed up your app load time and make it feel faster. You'll learn how and when to split code by views, and some tips for lazy loading heavy components within views. The example application is using Vaadin Fusion with LitElement views and TypeScript.

0:00 - Intro
0:28 - Project setup
2:31 - Using Chrome DevTools network inspector to profile the app
4:25 - Setting up code splitting by route with dynamic imports
8:18 - Lazy loading code within a view to improve load times
9:58 - Loading heavy components after the initial render
12:02 - Loading heavy components on demand

Vaadin starter wizard: https://start.vaadin.com