vue项目实现按需加载路由的3种方式

·  阅读 1929

vue组件异步的原因

前端开发使用Vue框架 路由这一块默认是这样的这样的

 import HelloWord from '@/components/HelloWord'
 import Login from '@/components/Login'
 import Index from '@/components/Index'
复制代码

     这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载,方法有三种:

1. vue异步组件

vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。
但是,这种情况下一个组件生成一个js文件。 举例如下:

   {
       path:'/login',
       name:'Login',
       component:resolve => reauire(['../component/login/login'],resolve)
   }
复制代码

2. es6提案的import()

推荐使用这种方式(需要webpack > 2.4)
     webpack官方文档:webpack中使用import()
     vue官方文档:路由懒加载(使用import())

  const Login=()=>import('../component/login/login')
  {
      path:'/login',
      name:'Login',
      component:Login
  }
复制代码

3. webpack的require.ensure()

vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。 这种情况下,多个路由指定相同的name,会合并打包成一个js文件。 举例如下:

 {
     path: '/login',
     name: 'Login',
     component: resolve => require.ensure([], () => resolve(require('../components/Login')), 'demo')
 },
 {
     path: '/hello',
     name: 'Hello',
     // component: Hello
     component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
 }
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改