3 ways to achieve project vue routing loaded on demand

ASSEMBLY ==== vue asynchronous asynchronous loading
vue-router configured to route the asynchronous component using vue technology, demand loading can be achieved.
However, in this case a component to generate a file 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)
}

Scheme II routing lazy loading assembly lazy loading (use Import)

// The following two lines of code, not specified webpackChunkName, each of the components packaged into a js file. 
/ * Const Home = () => Import ( '@ / Components / Home') 
const Index = () => Import ( '@ / Components / index') 
const the About = () => Import ( '@ / Components / About ') * / 
// 2 the following lines of code, specify the same webpackChunkName, will be merged into a packaged file js. The components in the component block 
const = Home () => Import (/ * webpackChunkName: 'ImportFuncDemo' * / '@ / Components / Home') 
const Index = () => Import (/ * webpackChunkName: 'ImportFuncDemo' * / '@ / Components / index') 
const the About = () => Import (/ * webpackChunkName: 'ImportFuncDemo' * / '@ / Components / About') 

{ 
  path: '/ About', 
  Component: the About 
}, { 
  path: '/ index', 
  Component:

webpack provided require.ensure ()
VUE-Router configured to route the use webpack require.ensure technique, loading may also be implemented as needed.
In this case, a plurality of identical specified routing chunkName, will be merged into a packaged file 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')
}

Reference: https://www.jianshu.com/p/876e1b85adb6

3 ways to achieve project vue routing loaded on demand

Guess you like