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. 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 [email protected]
    15

    View Slide