9.路由懒加载、异步加载组件、动态组件

https://blog.csdn.net/fanjianglin/article/details/113430620

异步加载组件

作用： 动态加载组件

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    AdminPage: defineAsyncComponent(() =>
      import("./components/AdminPageComponent.vue")
    ),
  },
};
</script>

<template>
  <AdminPage />
</template>

动态组件

作用：

1. 动态组件渲染使用 is attribute 属性 来切换不同的组件
2. 用<keep-alive>元素将其动态组件包裹，进行缓存

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

路由懒加载

作用： 用到的时候再加载组件

实现方式：

1. ES6 标准语法 import（）---------推荐使用！

// 1：直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
// 2：推荐使用这种方式，但是注意wepack的版本>2.4
// 3：vue官方文档中使用的也是import实现路由懒加载
// 4：上面声明导入，下面直接使用
import Vue from "vue";
import Router from "vue-router";
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import("../components/Foo");
// 下面代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
export default new Router({
  routes: [
    {
      path: "/Foo",
      name: "Foo",
      component: Foo,
    },
  ],
});

2. Vue 异步加载组件(也就是上面的异步加载组件)

	// 1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
 	// 2：component: resolve => require(['放入需要加载的路由地址'], resolve)
    {
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
    }

3. webpack 提供的 require.ensure()实现懒加载：

 	// 1：vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
 	// 2：这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
 	// 3：require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
 	// 4：第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
	// 5：第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
	// 6：第三个参数是错误回调。
	// 7：第四个参数是单独打包的chunk的文件名
    import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})