隨著專案的增大，我們需要將專案中的資源進行懶載入？那麼在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則不能按資料夾名字進行打包
  },