1.import动态导入

const Home = () => import( /* webpackChunkName: "Home" */ '@/views/Home.vue');

2.使用vue异步组件resolve

这种方式没有成功

//const 组件名 = resolve => require([‘组件路径’],resolve)
//（这种情况下一个组件生成一个js文件）
const Home = resolve => require(['../view/Home'],resolve)

3.使用webpack require.ensure()

const Home = () => require.ensure([], (require) => require('@/views/Home.vue'))

4.vue3的异步组件加载方式defineAsyncComponent

异步组件defineAsyncComponent加载不能用在首次展示或者首次重定向的页面

import { defineAsyncComponent } from 'vue'const ExcelPreview = defineAsyncComponent(() =>
import( /* webpackChunkName: "ExcelPreview" */ '@/views/ExcelPreview.vue')
)

但是使用会报警告：暂时不知道为什么

[Vue Router warn]: Component "default" in record with path "/test" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".