浅谈路由懒加载的实现与原理

为什么需要路由懒加载

首先，vue的特点是SPA，即单页面应用。

若没有使用路由懒加载，在webpack打包后，所有页面都会存放于同一个JS文件中，若页面数量很多，将造成JS文件过大，导致进入首页时，需要漫长的加载时间。

而运用路由懒加载，可以将页面进行划分，达到按需加载的效果，有效地分担首页承担的加载压力，减少首页的加载时间。

什么是路由懒加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

懒加载的前提

进行懒加载的子模块（子组件）需要是一个单独的文件

懒加载是对子模块（子组件）进行延后加载。如果子模块（子组件）不单独打包，而是和别的模块掺和在一起，那其他模块加载时就会将整个文件加载出来了，这样子模块（子组件）就被提前加载出来了。所以， 要实现懒加载，就得先将进行懒加载的子模块（子组件）分离出来。

懒加载的实现方法

ES6的动态加载模块 - import（）

() => import(`views/${
      
      component}`)

调用import（）之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中。

简单来讲就是，通过import()引用的子模块会被单独分离出来，打包成一个单独的文件。

vue实现路由懒加载

方法一

// 将
// import UserDetails from './views/UserDetails'
// 替换成

const UserDetails = () => import('./views/UserDetails')
​
const router = createRouter({
    
    
  // ...
  routes: [{
    
     path: '/users/:id', component: UserDetails }],
})

方法二

const router = new Router({
    
    
  routes: [
   {
    
    
     path: '/list',
     component: (resolve) => {
    
    
        // 这里是你的模块 不用import去引入了
        require(['@/components/list'], resolve)
     }
    }
  ]
})

方法三

使用webpack的require.ensure技术，也可以实现按需加载。 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

const List = resolve => require.ensure([], () => resolve(require('@/components/list')),'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    
    
  routes: [
  {
    
    
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))