CODEWITHSUNDEEP
vue.jswebpackvuexlazy-loadingvue-router
passionateLearner
passionateLearner

Reputation: 808

How does Vue router help to load page faster?

So I just got into the topic of Vue router today. I know that it helps contents to load faster by preventing the whole page to refresh everytime but to only bring necessary components.

But didn't it just load the whole bundle.js file (by Webpack) upon visiting the home page already? So since we already loaded the whole JS file upon first visit, wouldn't it be unnecessary to call separate JS files when visiting different pages?

This is the lesson I was watching.

Upvotes: 0

Views: 553

Answers (1)

Phil
Phil

Reputation: 164766

The main benefit you're talking about is navigating from one URL to another.

Normally, this would require a full page load, eg

Page1.html  👉 click link 👉  Page2.html
 - JS                           - JS
 - CSS                          - CSS
 - Images                       - Images

but by using a component router, you only need to swap out the parts of the page that have changed without reloading all your layout.

This is really at the core of what is known as a Single-page application where your app is quite literally one HTML page with parts within it that respond to URL changes.

The URL is able to be changed without requiring a full page load by either manipulating the URI fragment (aka hash) or by using the browser's History API.

In Vue Router, this choice is controlled by the mode configuration.

"But didn't it just load the whole bundle.js file"

Not necessarily. See Lazy Loading Routes.

Upvotes: 2

Related Questions