vue-router 懒加载

     懒加载:也叫延迟加载,即在需要的时候进行加载,按需加载。 那vue 为什么需要懒加载呢? 使用 vue-cli构建的项目,在默认情况下,执行 npm run build  会将所有的 js代码打包为一个整体,这个文件会异常的大,可能是几兆或者是十几兆,加载得会很慢,所以我们需要分模块打包,把不同路由对应的组件分割成不同的代码块。把我们想要组合在一起的组件打包到一个 chunk块中去,相同 chunk名字的模块将会打包到一起。然后当路由被访问的时候才加载对应的组件,这样就更高效了。

    以前的引用组件的方式可能是这样:

1 import Vue from 'vue'
2 import Router from 'vue-router'
3 
4 // 引入vue组件
5 import Manage from '@/page/admin/Manage'
6 import Login from '@/page/admin/Login'

   通过webpack提供的require.ensure()技术引用,实现懒加载

1 const Login= r => require.ensure([], () => r(require('@/page/admin/Login')), 'chunkName1');
2 const Manage = r => require.ensure([], () => r(require('@/page/admin/Manage')), 'chunkName2');

   最后将组件配置到路由中

 1 export default new Router({
 2     routes:[{
 3        path: '/',
 4        name: 'Login',
 5        component: Login  // vue组件
 6     },
 7     { 
 8       path: '/Manage',
 9       name: 'Manage',
10       component: Manage,
11     }
12 })

   vue-router 官方是通过import() 的方式实现懒加载,(需要webpack > 2.4),详细参照官方文档:

   https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

猜你喜欢

转载自www.cnblogs.com/jonathan102/p/9932685.html