Vue.js App Performance Optimization: part 2— Lazy loading routes and vendor bundle anti-pattern.

Filip Rakowski
ITNEXT
Published in
1 min readFeb 9, 2019

--

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!

--

--

Co-founder @ Vue Storefront / Frontend Developer @ Divante | Twitter @filrakowski