历史问题

历史按需加载是通过vant官网提供的按需加载进行，主要的实现代码如下

我们使用vant前，先引入整个项目对应需要使用到的模块组件，然后通过vue.use全局install组件，当我们使用对应组件的时候，不用单独引入。 弊端：因为我们的h5-assistant页面使用过动态组件的形式去加载路由的，当我们切换到那一个路由，我们才会去请求对应的vue（js）页面，最后执行js渲染出html，但是这样全局引入的组件，会让页面首次打开时，无论该页面时候引用了vant框架，都会把所有的vant使用过的组件引入到项目中来，而导致冗余。以下是其中一个例子： 如：我只打开任务中台的任务详情查看任务的完成状态，但是我会出现很多如vant弹窗组件注册，vant选择器组件注册，vant的表格组件注册等情况出现。

当前修改

在vue.config.js引入loadondemand loader， 让按需加载组件实现在打包层进行，项目通过webpack打包，打包过程中，主动判断当前vue文件（js文件）是否存在vant组件引用，如果存在，loader主动加上import { xxx } from 'vant' 在该页面。这样可以解决到，当我只是打开任务详情页面时，不会加载过多的其他页面的一些全局注册的组件，增加首次打开页面的效率 ，配置如下图所示： 直接引入loadondemand ，我们直接删除main.js中的vue.use(xxx)注册vant的组件方法，打包后页面自动引入对应组件。

弊端

1.同样，在loader执行中，会发现vant引入组件名称和实际注册组件名称不一致。 如下图例子所示： vant导出的组件名称是Button组件名称，但是当我们使用时候，也就是vant进行组件注册时，组件命名其实是vant-button。所以，loader在进行自动import组件时，loader采用了别名的方式进行导入。 如tempalte中使用了标签。页面会自动导入import { Button as VanButton } from 'vant' 的方式进行导入，所以弊端在于，我们在自定义组件时，不能用VanButton 来自定义我们自己开发的组件，不然会导致组件命名相同导致冲突。