vue路由懒加载详尽

为什么需要路由懒加载？

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。

懒加载可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，起到项目优化作用。

怎么用呢？

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]}
)

也可以这样引入组件，这种引入方法是把组件按组分块

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。比如有三个组件

const Foo = () => import(/* webpackChunkName: "about" */ './Foo.vue')

const Bar = () => import(/* webpackChunkName: "about" */ './Bar.vue')

const Baz = () => import(/* webpackChunkName: "about" */ './Baz.vue')

打包之后，在about就包含了Foo、Bar、Baz三个组件。

那其实vue项目实现路由按需加载（也就是路由懒加载）有多种方式，上面只是其中一种，下面做一个详细总结：

这里的总结转自： https://blog.csdn.net/mzrxLXR/article/details/81484676

第一种实现方法： vue异步组件技术 ==== 异步加载 

vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 

但是,这种情况下一个组件生成一个js文件。

/* vue异步组件技术 */

{

  path: '/home',

  name: 'home',

  component: resolve => require(['@/components/home'],resolve)

},{

  path: '/index',

  name: 'Index',

  component: resolve => require(['@/components/index'],resolve)

},{

  path: '/about',

  name: 'about',

  component: resolve => require(['@/components/about'],resolve)

}

第二种实现方法：组件懒加载方案二 路由懒加载(使用import)

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。

/* const Home = () => import('@/components/home')

const Index = () => import('@/components/index')

const About = () => import('@/components/about') */

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块

const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')

const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{

  path: '/about',

  component: About

}, {

  path: '/index',

  component: Index

}, {

  path: '/home',

  component: Home

}

第三种实现方法：使用webpack提供的require.ensure() 

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。 

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */

{

  path: '/home',

  name: 'home',

  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')

}, {

  path: '/index',

  name: 'Index',

  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')

}, {

  path: '/about',

  name: 'about',

  component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')

}

到了这里，你们是否注意到第一中方法和第三种方法的require、require.ensure？他们有什么区别呢？

这里转自： https://blog.csdn.net/weixin_38704338/article/details/79103230

require-amd 

说明: 同AMD规范的require函数，使用时传递一个模块数组和回调函数，模块都被下载下来且都被执行后才执行回调函数

语法: require(dependencies: String[], [callback: function(...)])

参数 

dependencies: 模块依赖数组

callback: 回调函数

require-ensure 

说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 

dependencies: 依赖的模块数组

callback: 回调函数，该函数调用时会传一个require参数

chunkName: 模块名，用于构建时生成文件时命名使用

注意点：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。