Webpack - The Destroyer of Performance Bottlenecks

Transcript

1. Obinna Odirionye
   WEBPACK - THE DESTROYER OF
   PERFORMANCE BOTTLENECKS
   1
   

   View Slide

2. 2
   Who is this yellow PAWPAW??
   ● Student Partner @ Microsoft
   ● Expert @ Github(now acquired
   by MSFT)
   ● Campus Ambassador @
   Ingressive
   ● DevOps Engineer
   ● Webpack & Ionic Framework
   Advocate.
   ● Mishai & Foodie Advocate
   

   View Slide

3. Hello! It’s me
   DEV: OH, WOAH. DO YOU HAVE TIME FOR
   SOCIAL MEDIA??
   ME: YEAH
   Github ID: nerdeveloper
   Twitter ID: @_nerdeveloper
   Facebook ID: obinna.odirionye
   Linkedin ID: odirionye
   3
   

   View Slide

4. “
   #TWEETQUOTE
   Help your audience surf your application
   better. Just Bundle with @webpack
   @_nerdeveloper
   4
   

   View Slide

5. THE WEBPACK FAMILY.
   5
   https://opencollective.com/webpack#contributors
   

   View Slide

6. “
   #TWEET THIS:
   Shout out to the Core Maintainers,
   Contributors, backers and sponsors of
   @webpack. Y’all are amazing
   #WebpackAfrica #forLoopPH
   6
   

   View Slide

7. PERFORMANCE BOTTLENECKS
   DEV: *Ships over 20 static file(s) assets unbundled* Page size
   [45MB]
   ISP: Your data Subscription is already exhausted.
   Users:
   7
   

   View Slide

8. WEBPACK
   Webpack grabs all your static file assets like
   images, JS, CSS and create large dependency graph.
   This is where one or more bundles are made.
   8
   WHAT DOES WEBPACK REALLY DO?
   WHY USE WEBPACK?
   1. Don’t need to refresh to update modules.
   2. Minimize the number of req and size of files if possible.
   3. Break the cache only when necessary
   4. Deploy like a boss with no missing files
   Credit: Glitch
   

   View Slide

9. #OCJS
   BUNDLER
   MORE
   MODULE
   TYPES
   CRAZY FEATURES ABOUT WEBPACK
   FASTER
   BUILD
   TIMES
   9
   WASM
   OUT OF
   THE
   BOX
   BETTER
   DEFAULTS
   

   View Slide

10. ENTRY
    Allow webpack to know the file(s)
    you want to bundle. It will take
    over everything from there
    WHAT DO SHOULD KNOW ABOUT
    WEBPACK
    OUTPUT
    Let Webpack know where your
    bundles are kept and what you want
    to name them
    10
    LOADERS
    Loaders allows webpack to know the
    kind of file types it needs to
    transform like css - css loaders,
    File - File loaders
    PLUGINS
    Plugins do all the crazy work like
    bundling, optimize bundles,
    managing assets and more.
    

    View Slide

11. WHAT’S YOUR COVERAGE
    DEVELOPERS, WHY ARE YOU STILL SHIPPING
    DEAD CODE TO USERS?? .
    YOUR PRODUCTION CODEBASE IS MY FEAR
    1. Load page on Chrome, use Coverage Tool (DevTools =>
    Ctrl+Shift+P => type "Coverage" => press Drawer: Coverage),
    11
    

    View Slide

12. WHAT YOU NEED
    INSTALLATIONS
    ◍ NODE JS -> https://nodejs.org/en/download/
    ◍ WEBPACK -> npm i webpack
    ◍ WEBPACK-CLI -> npm i webpack-cli
    ◍ NGROK -> npm i -g ngrok
    ◍ HTTP-SERVER -> npm i -g http-server
    12
    

    View Slide

13. LIVE CODE SESSIONS ON WEBPACK
    LET’S MAKE YOUR FIRST BUNDLE
    ◍ git clone https://github.com/nerdeveloper/forloopPH-talk.git
    ◍ npm install
    ◍ webpack --mode development ./assets/js/main.js --output
    ./dist/bundle.js
    ◍ webpack --mode production ./assets/js/main.js --output
    ./dist/bundle.js
    LET’S BANG!!!!!!!!!!!!!!!!!!
    13
    

    View Slide

14. HURRAY!!!! WE HAVE BUNDLED
    14
    

    View Slide

15. “
    Thank you for your time.
    Any Question?
    Reach me @_nerdeveloper and odirionye@gmail.com
    15
    

    View Slide