面试题答案
一键面试具体步骤
- 定义异步组件:在Vue中,使用
() => import('组件路径')
的方式来定义异步组件。这种方式会告诉Webpack在需要时才去加载该组件,而不是在初始时就全部加载。 - 配置路由:在路由配置中,将定义好的异步组件作为路由的
component
选项。这样当路由匹配到该路径时,才会去加载对应的异步组件。
原理
- Webpack的代码分割:
import()
语法是ES2020引入的动态导入语法,Webpack利用它实现代码分割。当使用() => import('组件路径')
时,Webpack会将该组件单独打包成一个chunk文件。 - 按需加载:在Vue Router中,当路由切换到需要加载异步组件的路径时,Vue Router会触发加载异步组件的操作,此时Webpack会通过HTTP请求去获取对应的chunk文件,然后将其加载并渲染到页面中。
代码示例
- 定义异步组件:
假设在
src/views
目录下有Home.vue
和About.vue
两个组件。
// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
- 组件代码(以
Home.vue
为例):
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script setup>
// 组件逻辑
</script>
<style scoped>
/* 组件样式 */
</style>
同样,About.vue
也有类似的结构,只是展示内容不同。这样,在访问/
和/about
路径时,对应的组件才会被异步加载。