4 /10 Vue中的路由懒加载

前面的话

前端日问，巩固基础，不打烊！！！

解答

为什么要进行懒加载？

如果不使用懒加载，首页加载的内容就会很大，会出现长时间的白屏。运用懒加载可以实现按需加载，请求到该页面时，才会加载这个页面。

三种实现方式

• Vue的异步组件

   routes: [
      {
        path: '/',
        name: 'memo',
        component:  (resolve) => require(['@/pages/memo'], resolve)
      },
      {
        path: '/robot',
        name: 'robot',
        component:  (resolve) => require(['@/pages/robot'], resolve)
      },
      {
        path: '/setting',
        name: 'setting',
        component:  (resolve) => require(['@/pages/setting'], resolve)
      },
    ]
  

• 使用import()

   routes: [
      {
        path: '/',
        name: 'memo',
        component:  (resolve) => import('@/pages/memo')
        //  component:  (resolve) => import(/* webpackChunkName: "demo" */ '@/pages/memo')
      },
      {
        path: '/robot',
        name: 'robot',
        component:  (resolve) => import('@/pages/robot')
        //  component:  (resolve) => import('/* webpackChunkName: "demo" */ @/pages/robot')
      },
      {
        path: '/setting',
        name: 'setting',
        component:  (resolve) => import('@/pages/setting')
        //   component:  (resolve) => import(' /* webpackChunkName: "demo" */ @/pages/setting')
      },
    ]
  

  允许将不同的组件打包到一个异步块中，使用命名chunk(特殊注释语法)。
  能够被webpack自动代码分割，Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

• 使用webpack的require.ensure()

  指定相同的ChunkName,Webpack 会合并打包为一个js文件。

  /* 组件懒加载方案三: webpack提供的require.ensure() */
  	{
  	  path: '/',
  	  name: 'memo',
  	  component: (resolve) => require.ensure([], () => resolve(require('@/pages/memo')), 'demo')
  	}, {
  	  path: '/robot',
  	  name: 'robot',
  	  component: (resolve) => require.ensure([], () => resolve(require('@/pages/robot')), 'demo')
  	}, {
  	  path: '/setting',
  	  name: 'setting',
  	  component:(resolve) => require.ensure([], () => r(require('@/pages/setting')), 'demo-01')
  	}