vue中懒加载组件的几种方式及优缺点

1.const componentsName = （）=>import('路径')

此写法在webpack2.x中，路径里不可拼接变量，会报错，但是在webpack4.x中可支持变量参数。

并且一个组件会打包成一个js文件。若想把多个组件打包到一个js文件中，可以加上/* webpackChunkName: "[name]" */，来实现。例如：
const componentsName = () => import(/* webpackChunkName: "[name]" */ `@/views/${url}`)

2.const componentsName = (resolve)=>require(`@/page/${url}`,resolve)

此写法也是异步组件，懒加载，但是一个组件只能打包到一个js中。无法合并到一个js中。并且如果引入的组件是index.vue，在name目录下，这个时候必须引入精确到index.vue，否则找不到该组件。

3.const componentsName = r => require.ensure([], () => r(require(`@/page/${url}/`)，name),

第一个参数：是一个数组，是当前模块的一些依赖。

第二个参数：是回调函数，写入组件的路径

第三个参数：是指定打包的组块名称。但是name不能是参数，只能是字符串。