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')
  	}