Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack - The Destroyer of Performance Bottlenecks

Webpack - The Destroyer of Performance Bottlenecks

Obinna Odirionye

August 18, 2018
Tweet

More Decks by Obinna Odirionye

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. “ #TWEET THIS: Shout out to the Core Maintainers, Contributors,

    backers and sponsors of @webpack. Y’all are amazing #WebpackAfrica #forLoopPH 6
  4. PERFORMANCE BOTTLENECKS DEV: *Ships over 20 static file(s) assets unbundled*

    Page size [45MB] ISP: Your data Subscription is already exhausted. Users: 7
  5. 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
  6. #OCJS BUNDLER MORE MODULE TYPES CRAZY FEATURES ABOUT WEBPACK FASTER

    BUILD TIMES 9 WASM OUT OF THE BOX BETTER DEFAULTS
  7. 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.
  8. 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
  9. 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
  10. 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