vue路由懒加载及实现方式(vue-router)

路由懒加载的是打包部署时将资源按照对应的页面进行划分，需要的时候加载对应的页面资源，而不是把所有的页面资源打包部署到一块。避免不必要资源加载

第一种

// 非懒加载
import Home from '@/components/Home'
 
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  }

这里有三种方式可以实现vue项目路由跳转时资源的按需加载

1. vue异步组件

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

但是，这种情况下每一个组件就会生成一个js文件，不能分类指定chunkName

// vue异步组件
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'], resolve)
}

2. 使用import

// const 组件名 = () => import('组件路径');
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Home = () => import('@/componnets/home');
const Index = () => import('@/components/index');
 
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件
// 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home');
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
 
{
  path: '/home',
  name: 'home',
  component: Home
}, {
  path: '/index',
  name: 'index',
  component: Index
}

我发现以上代码也可以直接写进去

const routes = [
    // 首页.
    {
        path: '/',
        component: ()=>import('@/views/Home.vue'),
        name: 'index',
    },
    {
        path: '/ceshi',
        component: ()=>import('@/views/ceshi.vue'),
        name: 'ceshi',
    },
]

3. webpack提供的require.ensure()

该方法也可指定相同的chunkName，合并打包成一个js文件。

{
  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会单独生成一个js文件
  component: r => require.ensure([], () => r(require('@/components/index')), '')
}