Vue实现路由懒加载的方式以及打包问题 vue.js

一、实现路由懒加载的方式 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) }, ]

【Vue实现路由懒加载的方式以及打包问题】这种语法不能指定模块的名称，默认使用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文件。
所以尽量不要在路径参数中带上变量。