Vue.js Courses and Tutorials
In the previous article, we learned about the concept of lazy loading and briefly understood how webpack bundling works under the hood. With a good understanding of basics, we can see how to apply this knowledge in a real-world Vue application. The trick you will earn today could dramatically decrease your bundle size in just a few minutes. Feel excited? Let’s see what it is!
While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration it’s harder and harder to keep your application loading fast. In this series, I’ll dig deep into Vue performance optimization techniques that we are using in Vue Storefront and that you can use in your Vue.js applications to make them loading instantly and perform smooth. My goal is to make this series a full and complete guide on Vue apps performance.
Monday I woke to see a ton of people tweeting about some new feature of Vue 3! I get excited and see this tweet from Evan You, the creator of Vue, in the event you didn't know.
Really appreciate the writeup by Daniel Elkington: https://t.co/CsH1RC8V7p
— Evan You (@youyuxi) June 22, 2019
Well hello there! Here at Vue School we aim to mould and develop the next generation of Vue.js experts. Everyone, from Advanced to “just starting out” beginners, can find a place here at Vue School learning and developing their Vue skills regardless of level. That has been our goal from the start, to allow developers of all levels to hone and perfect their abilities to build websites and applications in Vue!
As soon as you start learning Vue you find out that the atomic unit of its architecture are components. In fact, that's nothing Vue-specific: any component-based technology, such as React or Angular, work the same way.
One day you start creating a Vue application. You start creating components in order to structure the different pieces of your application. That's cool and you should be feeling the great dev experience of Vue and the web component architecture. As you go on with your project you start to somehow structure your application components, probably by pages and components.
As your application grows, you start to look for performance patterns to make it faster. On the way, you'll find code splitting and lazy loading to be two of them that make your initial bundle smaller by deferring the loading of code chunks until needed.
When building applications you often come across the case where you need to design a list or search interface for the user. They usually manage lots of data, thus you need a way for the user to show it "in chunks" so that we keep the application performance and the data organized.
In the CSS world, we can see plenty of great preprocessors that improve the language, being SASS/SCSS, LESS and PostCSS the most common among them. SASS seems to be still the most popular and used solution by the date of writing, and that's no surprise since it's fully featured and extends the CSS language with an easy to understand syntax.
This testing series are focused on JavaScript as a language and testing techniques, but since we’re VueSchool, we couldn’t end it up without a simple Vue example, right?
