vue-router-按需加载

路由组件按需加载

参考连接： https://www.cnblogs.com/yzq-fighting/p/7731545.html

在vue项目中，一般引入组件都是用import

import 组件名 from '组件路径'

webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载

1. require.ensure()

webpack提供的require.ensure(),这样可以实现按需加载，并且你可以将多个相同类的组件打包成一个文件，只要给他们指定相同的chunkName即可，如示例中的demo将会打包成一个文件

{
     path: '/promisedemo',
     name: 'PromiseDemo',
     component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
},
{
     path: '/hello',
     name: 'Hello',
     // component: Hello
     component: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
}

2. Vue的异步组件技术，这种方法可以实现按需加载，并且一个组件会打包成一个js文件

 {
       path: '/promisedemo',
       name: 'PromiseDemo',
       component: resolve => require(['../components/PromiseDemo'], resolve)
}

3. import（）

使用import关键字引入,这个import('XXX')函数会返回一个Promise对象;参考资料vue-router路由懒加载

{
  path: '/',
  name: 'index',
  component:() => import('@/views/index/index')
 }