Vue.js App Performance Optimization: part 2— Lazy loading routes and vendor bundle anti-pattern.
In the previous article we learned what code splitting is, how it works with Webpack and how to make use of it with lazy loading in Vue app. Now we will dig a little bit deeper into the code and learn most useful pattern for code splitting Vue.js apps.
This series is based on learnings from Vue Storefront performance optimization process. By using below techniques we were able to cut off size of our initial bundle by 70% and made it load in a blink of an eye.
Part 1 — Introduction to performance optimization and lazy loading.
Part 2 — Lazy loading routes and vendor bundle anti-pattern.
Part 3 — Lazy loading Vuex modules
Part 4 — Delivering good waiting experience and lazy loading individual components — soon
Part 5 — Lazy loading libs and finding smaller equivalents — soon
Part 6 — Performance-friendly usage of UI libraries
Part 7— Making use of Service Worker cache — soon
Part 8— Prefetching
Article moved
Hey this article has been updated with much more insights and moved to VueSchool blog here!