Fast and Furious with VueJS & WebPack November 5, 2020 SHODIPO AYOMIDE | VUE TORONTO, TORONTO, ONTARIO

Shodipo Ayomide Senior Developer Advocate & Developer ProgramS Manager - GitHub Star - Cloudinary Media Developer Expert - Community Evangelist Twitter & GitHub @developerayo

5 Billion Devices Connected to web globally. @DEVELOPERAYO

SPEED AS A FEATURE @DEVELOPERAYO

@DEVELOPERAYO VueJS is a progressive JavaScript framework for building user interfaces for the web. What is VueJS

@DEVELOPERAYO VueJS is designed to be simple and very flexibe when it comes to changes and features.

@DEVELOPERAYO VueJS has out of the box, Performance as a feature. Issn't that great?

@DEVELOPERAYO VueJS is powerful enough to build powerful single page applications.

@DEVELOPERAYO Some Benefits - Out of the box Performance - Easy to Learn - Easy to maintain

@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.

@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.

@DEVELOPERAYO Speed == Great user experience

@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

@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

@DEVELOPERAYO Performance is about improving conversions and the success of users.

@DEVELOPERAYO Performance in VueJS

@DEVELOPERAYO Keep the core of your application simple and straight forward, Do not over-engineer.

@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

@DEVELOPERAYO WebPack Bundle Analyzer

Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle- analyser to your `package.json` file. WebPack Bundle Analyzer

Setup the webpack-bundle- analyzer as a plugin in your `webpack.config.prod.js` file WebPack Bundle Analyzer

@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

@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

Questions? Follow me on Twitter & GitHub @developerayo Thank You! SHODIPO AYOMIDE | VUE TORONTO, TORONTO, ONTARIO