vue-router路由懒加载及实现的方式

也叫延迟加载，即在需要的时候进行加载，随用随载。

为什么使用路由懒加载

在终端 npm run build 后，vue项目中会生成一个 dist文件夹 ，它包含一个 js文件夹，里面有 app.js、vendor.js、manifest.js 文件，分别装的是业务逻辑代码、第三方提供商代码（框架等）、底层支撑代码（比如一系列底层环境）。

因为随着项目的开发推进，业务逻辑代码会越来越多，所以上述的业务逻辑代码文件，即 app.js文件 也会越来越大。当用户打开这个网站的时候，很可能会因为请求的文件过大而等待时间过长。为了避免这种情况，我们需要懒加载。

vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢，

一、Vue异步加载技术

vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。

语法：component: resolve => require([‘放入需要加载的路由地址’], resolve)

{
    path: '/problem',
    name: 'problem',
    component: resolve => require(['../pages/home/problemList'], resolve)
}

二、ES6推荐方式imprort ()----推荐使用

非懒加载：component: index
如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长

语法：component:() => import(’./About.vue’)；

//主要这句话
const router = new VueRouter({  
  routes: [   
   	  { path: '/about', 
   	  component:  () => import('./About.vue') }]
   })

require 和 import 引入依赖的区别

require是Commonjs的规范，node应用是由模块组成的，遵从commonjs的规
import是es6为js模块化提出的新的语法，import （导入）要与export（导出）结合使用

commonjs模块与ES6模块的区别

1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；
2.commonjs是运行时加载，es6是编译时输出接口；

链接: https://blog.csdn.net/weixin_37380784/article/details/99671933.
链接: https://blog.csdn.net/liya_nan/article/details/81141244.require 和 import 引入依赖的区别
链接: https://www.jb51.net/article/206486.htm.