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.
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.
In Vue Router, this choice is controlled by the
"But didn’t it just load the whole bundle.js file"
Not necessarily. See Lazy Loading Routes.