Webpack - The Destroyer of Performance Bottlenecks

Transcript

1. Obinna Odirionye WEBPACK - THE DESTROYER OF PERFORMANCE BOTTLENECKS 1
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
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
4. “ #TWEETQUOTE Help your audience surf your application better. Just Bundle with @webpack @_nerdeveloper 4
5. THE WEBPACK FAMILY. 5 https://opencollective.com/webpack#contributors
6. “ #TWEET THIS: Shout out to the Core Maintainers, Contributors, backers and sponsors of @webpack. Y’all are amazing #WebpackAfrica #forLoopPH 6
7. PERFORMANCE BOTTLENECKS DEV: *Ships over 20 static file(s) assets unbundled* Page size [45MB] ISP: Your data Subscription is already exhausted. Users: 7
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
9. #OCJS BUNDLER MORE MODULE TYPES CRAZY FEATURES ABOUT WEBPACK FASTER BUILD TIMES 9 WASM OUT OF THE BOX BETTER DEFAULTS
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.
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
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
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
14. HURRAY!!!! WE HAVE BUNDLED 14
15. “ Thank you for your time. Any Question? Reach me @_nerdeveloper and odirionye@gmail.com 15