浅谈ES6 vue路由懒加载的实现与原理分析

ES6

为什么需要路由延迟加载

首先，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
  }
 ]
}))