vue实现路由懒加载

webpack支持amd、commonJS、es6这三种模块语法，因此vue实现动态路有3种方式：

1. 使用AMD规范的require语法

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: resolve => require(['../views/About.vue'], resolve)
  },
]

这种语法不能指定模块的名称，默认使用webpack配置中output.chunkFileName。

2. 使用commonJS规范的require.ensure语法

require.ensure() 是 webpack 特有的，已经被 import() 取代。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
     component: resolve => require.ensure([], () => resolve(
      require('@/' + about + '.vue')
    ), 'about')
  },
]

此语法和下面的import语法均可以指定模块名称

3. 使用ES6原生的import语法

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
]

这种是vue-cli3默认使用的方式。

以上三种方式，如果路径参数中都包含变量，webpack打包就会出现问题。

1. import()会将该组件所在的目录内的所有组件都引入进来。

const about = 'views/About'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ `../${about}.vue`)
  },
]

这样会将views目录下的所有组件都进行打包，即使没有在路由中没有配置。
因此wbepackChunkName指定的文件名也会有所改变，上面的About页面组件会打包成about1、about2类似的名称。
如果后续的路由配置中的路径参数也带有变量，那不管你指定什么webpackChunkName，打包出来的都是按照第一个import指定的webpackChunkName。例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ `../${about}.vue`) // 打包成about2.js
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ `../${test}.vue`) // 最终打包成 about3.js 这样的文件名，而不是test.js
  },

2. require()和require.ensure则会将所有带上变量的路由组件打包为一个js

let home = 'views/Home'
let about = 'views/About'
let test = 'views/Test'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: resolve => require(['../' + about + '.vue'], resolve)
  },
  {
    path: '/test',
    name: 'Test',
    component: resolve => require(['../' + test + '.vue'], resolve)
  },

about页面组件和test页面组件会被打包进同一个js文件。

所以尽量不要在路径参数中带上变量。

最后编辑于：2020.02.28 19:53:03