【vue】路由懒加载

vue路由懒加载指打包部署的时候按照对应的页面进行划分，需要的时候加载对应的页面资源，不是一次性加载所有的资源。

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

三种按需加载的方式

1.异步组件

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
}

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

正常情况下打包，每个路由对应的component都会生成一个js文件，如果项目中有几百个路由，就会生成几百个js文件，是没有必要的，可以通过webpackChunkName将模块进行分类，减少打包生成的文件数量。