VUE路由懒加载的方法小结

随着项目的增大，我们需要将项目中的资源进行懒加载？那么在vue项目中如何实现呢？

1、方法一：ES6的import()方法

利用import 的方法进行懒加载，注意  /* webpackChunkName: "group-foo" */  为魔法注释，可将重命名打包后文件的名字，如果名字一致路由，最后打包到一个文件中。

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') }
  ]
})

2、方法二：require()方法

 利用resolve 的方法，如下所示

const router = new VueRouter({
  routes: [
    { path: '/foo', component:resolve=>(require(["./Foo.vue"],resolve)) }
  ] 
})

3、方法三：异步组件+webpack的ensure()方法

const router = new VueRouter({
  routes: [
    { path: '/foo', component: r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') }

  ]

})

注意：在以上的基础上，webpack.prod.conf.js 中的需要改成如下配置：

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')   // 此处的name如果改为id则不能按文件夹名字进行打包
  },

 以上三种方法，其实还是有些区别的，具体区别还不是特别理解。