How to work on lazy load(async loading) Vue without vue-cli or node?

I am very new to vue. I know that this one is easy with vue-cli but I need to learn this first without using the node.
I was making many template files and pages in different js files. Suddenly it hit my mind that what if a lot of file is requested and downloaded?
What I am trying to do is I am trying to fuse route and async component loading together for loading different pages when they are called.
Is there a way to do this? This is the code that I tried for my initial project.

 <html>
 <head>
 
      <script src="vue.js"></script>
  <script src="vue-route.js"></script>
    <script src="axios.min.js"></script>

 </head>
 <body>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</div>
 <script>
 //axios.get("https://shohanlab.com")

const Home = { template: '<div>Home</div>' }
const AsyncComp =
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: About
      })
    })
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: AsyncComp },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})

const app =Vue.createApp({})
app.use(router)
app.mount('#app')
  </script>
 </body>
</html>

As we can see in the code that The About.js is called even before I call it. In this way the page size will be very big.