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則不能按文件夾名字進行打包
  },

 以上三種方法，其實還是有些區別的，具體區別還不是特別理解。