vue router 两种import的区别

Question

`

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/child/child1/',
    name: 'Home',
    component: Home
  },
  {
    path: '/child/child1/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

`

请问各位大佬
import Home from '../views/Home.vue'
component: Home
和
component: () => import('../views/About.vue')
这两种方式有什么区别

Answer 1

component: Home

这种事直接导入，也就是说页面文件会打成一个包。全量加载

component: () => import('../views/About.vue')

按需导入，也就是单个页面打包一个js文件，跳转到哪个页面的时候再去加载这个文件