Add esbuild to project
  • How we will learn
  • Add esbuild
  • Organize code
Manage js & json
  • Introduction & code setup
  • Header refactoring
  • Challenge 1: contact-list refactoring
  • Move data to json
  • Import npm package
  • Types of import
Manage html
  • Introduction & code setup
  • Import html file
  • Use template for contact-list
  • Challenge 2: use template for header
Manage images & css
  • Introduction & code setup
  • Inline images
  • Images as separate files
  • Import css files
Development setup
  • Watch & build
  • Set up development server
  • Reduce code duplication
  • Move to build script
  • Move to esbuild-serve
Use TypeScript & SCSS
  • Move header component to TypeScript
  • Move contact-list to TS
  • Finish TS migration
  • Add source map
  • Add SCSS to header component
  • Challenge 3: add SCSS to component-list
Optimizations
  • Minification
  • Tree shaking - current package
  • Dependencies' optimization
  • Add another page
  • Code splitting
  • Lazy loading