Fast and Furious with VueJS & WebPack

Images account for 60% of the data to be loaded on almost every webpage, how fast your app performs while being used by clients is very important to the sustainability of your product, in this talk, I will show you how Webpack can increase the speed of your Vue app and how exactly to get this set up from start to finish, which would be fast & furious.

Transcript

1. Fast and Furious with VueJS & WebPack November 5, 2020 SHODIPO AYOMIDE | VUE TORONTO, TORONTO, ONTARIO
2. Shodipo Ayomide Senior Developer Advocate & Developer ProgramS Manager - GitHub Star - Cloudinary Media Developer Expert - Community Evangelist Twitter & GitHub @developerayo
3. 5 Billion Devices Connected to web globally. @DEVELOPERAYO
4. SPEED AS A FEATURE @DEVELOPERAYO
5. @DEVELOPERAYO VueJS is a progressive JavaScript framework for building user interfaces for the web. What is VueJS
6. @DEVELOPERAYO VueJS is designed to be simple and very flexibe when it comes to changes and features.
7. @DEVELOPERAYO VueJS has out of the box, Performance as a feature. Issn't that great?
8. @DEVELOPERAYO VueJS is powerful enough to build powerful single page applications.
9. @DEVELOPERAYO Some Benefits - Out of the box Performance - Easy to Learn - Easy to maintain
10. @DEVELOPERAYO Why does speed matter? The attention span of alot of people is very limited, and in website design it’s all about instant delivery. Notwithtstanding how powerful of up to date the features you have on your product, if it's slow, users will turn away.
11. @DEVELOPERAYO Why does speed matter? Users love instant delivery of what they want, if you can optimize successfully and use the right technologies and your performance speed to top notch, you just gained a paying user.
12. @DEVELOPERAYO Speed == Great user experience
13. @DEVELOPERAYO Speed == Great user experience Performance is the first impression your product gives to users. - You never get a second chance to make a good first impression. - Will Rogers
14. @DEVELOPERAYO Speed == Great user experience Performance is the first impression your product gives to users. - You never get a second chance to make a good first impression. - Will Rogers
15. @DEVELOPERAYO Performance is about improving conversions and the success of users.
16. @DEVELOPERAYO Performance in VueJS
17. @DEVELOPERAYO Keep the core of your application simple and straight forward, Do not over-engineer.
18. @DEVELOPERAYO Your application's core need's to be super fast, users need to receive what you are rendering as fast as possible, For this you need to load your components asynchronous
19. @DEVELOPERAYO WebPack Bundle Analyzer
20. Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle- analyser to your `package.json` file. WebPack Bundle Analyzer
21. Setup the webpack-bundle- analyzer as a plugin in your `webpack.config.prod.js` file WebPack Bundle Analyzer
22. @DEVELOPERAYO Once you have setup the webpack bundle-analyzer you then have to run the `npm run build` command in your terminal, and it’ll generate another host. WebPack Bundle Analyzer
23. @DEVELOPERAYO Visit the generated host by clicking the IP, `127.0.0.1:8888` to view the visuals of your JavaScript Bundles WebPack Bundle Analyzer
24. Questions? Follow me on Twitter & GitHub @developerayo Thank You! SHODIPO AYOMIDE | VUE TORONTO, TORONTO, ONTARIO