JSFoo Pune 2019

JSFoo is a JavaScript conference hosted by HasGeek.

Performance Feat. Webpack

Submitted by Atishay Baid (@atishaybaid) on Sep 30, 2018

Section: Full talk Technical level: Intermediate Status: Confirmed & scheduled

Abstract

I believe that performance is a must for modern websites and web-based business, hence this talk will be focused on understanding performance, and how the latest version of webpack and its great plugin systems addresses a lot of concerns,we will cover the following techniques

  • Lazy loading JavaScript
  • Removing unused code with tree shaking
  • Pre-fetching assets
  • Dynamic code splitting

We will see how JavaScript rendering engines works, how code is getting parsed in some of the popular browser engines.and how we can reduce the compilation and execution timing.We will also see how much performance cost a new TCP connection make.

Outline

  • Performance Introduction

    • Introduction to performance
    • What to expect in this talk
    • Importance of measurement
    • Common Misconception
  • Cost of JavaScript

    • Looking into how Browsers parses JavaScript
    • How we can Reduce the parse Time
    • Scope of Optimizations
  • Optimization with webpack

    • Performance focus of webpack especially version 4
    • Lazy loading strategies
    • Code splitting strategies for CSS and JS
    • Prefetching
    • Split chunk plugins
    • Other plugins for performance tuning
  • A brief look into some of the case studies,where these techniques improved a lot of performance

  • Conclusion QnA and About me

Speaker bio

I am Frontend engineer Currently working With BirdEye,Recenlty I had involed in solving some of the major performance challanges,hacking a lot on webpack,and help people solve performance challenges.
https://twitter.com/atishaybaid https://www.linkedin.com/in/atishay-baid-7b17a447

Links

Slides

https://speakerdeck.com/atishaybaid/performance-feat-webpack

Preview video

https://www.youtube.com/watch?v=01ykPHM-1qQ

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}