vue中路由的按需加载

在vue中我们经常在router.js中这样配置我们的路由表

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢
所以需要按需加载路由
第一种：webpack给我们提供一种按需加载的方法： require.ensure(依赖的模块[],callback是所有模块加载完毕执行，moduleName模块名字）
如下：

const home = r = > require.ensure([],()=>r(require('../components/pages/home.vue')),'home')

dependencies：字符串构成的数组，声明 callback 回调函数中所需的所有模块,模块作为依赖被加载
callback：只要加载好全部依赖，webpack 就会执行此函数。require 函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用 require() 来加载依赖。函数体可以使用此参数，来进一步执行 require() 模块。
errorCallback：当 webpack 加载依赖失败时，会执行此函数。
chunkName：由 require.ensure() 创建出的 chunk 的名字。通过将同一个 chunkName 传递给不同的 require.ensure() 调用，我们可以将它们的代码合并到一个单独的 chunk 中，从而只产生一个浏览器必须加载的 bundle。

第二种：vue异步组件

 {
                path: '/promisedemo',
                name: 'PromiseDemo',
                component: resolve => require(['../components/PromiseDemo'], resolve)
            }

第三种 es import（）

有一种:
const Foo = () => import(/* webpackChunkName: "group-foo" */  './main.vue')
另一种：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:  ()=>import('@/components/HelloWorld')     
    }
  ]
})

vue中路由的按需加载

猜你喜欢