幾種路由懶加載 實現方式

路由懶加載

兩種方式： 1..Vue異步加載技術

  1：vue-router配置路由，使用vue的異步組件技術，可以實現懶加載，此時一個組件會生成一個js文件。
  2：component: resolve => require(['放入需要加載的路由地址'], resolve)
​

  {
     path: '/problem',
     name: 'problem',
     component: resolve => require(['../pages/home/problemList'], resolve)
   }
​

2.ES6推薦方式imprort ()

  1：直接將組件引入的方式，import是ES6的一個語法標准，如果需要瀏覽器兼容，需要轉化成es5的語法。
  2：推薦使用這種方式，但是注意wepack的版本>2.4
  3：vue官方文檔中使用的也是import實現路由懶加載
  4：上面聲明導入，下面直接使用
​

import Vue from 'vue';
import Router from 'vue-router';
// 官網可知：下面沒有指定webpackChunkName，每個組件打包成一個js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代碼，指定了相同的webpackChunkName，會合並打包成一個js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        {
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})