vue中利用webpack实现懒加载

责编:menVScode 2017-12-14 16:18 阅读(915)

vue中的懒加载

        把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件。(按需加载)

Vue异步组件

{
    components:{
        custom:(resolve,reject)=>{}
    }
}

方式1

import WebHeader from '@/components/Header'
export default {
    data(){
        return {
            flag:''
        }
    },
    components:{
        // WebHeader
        WebHeader:(resolve)=>{
            setTimeout(()=>{ // 用setTimeout模拟数据加载时间
                resolve(WebHeader)
            },2000)
        }
    },
    beforeRouteEnter(to,from,next){
        next((vm)=>{
            vm.flag = flags[to.path.slice(1)]
        })
    },
    watch:{
        $route(){
            // console.log(this.$route)
            this.flag = flags[this.$route.path.slice(1)]
        }
    }
}

方式2

//import WebHeader from '@/components/Header'
export default {
    data(){
        return {
            flag:''
        }
    },
    components:{
        // WebHeader
        WebHeader:(resolve)=>{
            setTimeout(()=>{ // 用setTimeout模拟数据加载时间
                resolve(require('@/components/Header'))
            },2000)
        }
    },
    beforeRouteEnter(to,from,next){
        next((vm)=>{
            vm.flag = flags[to.path.slice(1)]
        })
    },
    watch:{
        $route(){
            // console.log(this.$route)
            this.flag = flags[this.$route.path.slice(1)]
        }
    }
}

webpack代码分割功能

require.ensure代码分块:require.ensue(依赖, 回调函数, [chunk名字])
import函数,直接返回promise对象


vue中的实现懒加载需要Vue异步组件和webpack相互配合。项目中生成的app.js包含所有组件的js文件,现在要实现按需加载,进到首页只加载首页的js文件。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Home from '@/components/Home'
import Login from '@/components/Login'
// import Layout from '@/view/Layout'
// import Doc from '@/view/backend/Doc'
// import Workbench from '@/view/backend/Workbench'
// import Project from '@/view/backend/Project'

let Layout = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/Layout'))
  })
}

let Doc = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/backend/Doc'))
  })
}

let Workbench = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/backend/Workbench'))
  })
}

let Project = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/backend/Project'))
  })
}

 let router = new Router({
  mode:'history',
  linkActiveClass:'menvscode-active',
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    {
      path: '/management',
      name: 'Management',
      component: Layout,
      children:[
        {
          path: '/project',
          name: 'Project',
          component: Project,
          meta:{
            login:true
          }
        },
        {
          path: '/workbench',
          name: 'Workbench',
          component: Workbench,
          meta:{
            login:true
          }
        },
        {
          path: '/doc',
          name: 'Doc',
          component: Doc,
          meta:{
            login:false
          }
        }
      ]
    },
    {
      path:'*',
      redirect:{name:'Home'}
    }
  ]
})

router.beforeEach(function(to,from,next){
  //console.log(to)
  //console.log(to.matched.some( (item) => item.meta.login ) )

  if(to.matched.some( (item) => item.meta.login )){
    // console.log(this) // this不是根模块的实例
    // router实例有app属性,代表根实例
    let info = router.app.$local.fetch('userInfo').login
    if(info){
      next()
    }else{
      // next('/login')
      router.push({
        path:'/login',
        query:{
          redirect:to.path.slice(1)
        }
      })
    }
  }else{
    next()
  }
})

export default router

上面代码是按组件来划分js文件,现在要将 Workbench 组件和 Doc 组件的js文件打包在一起,代码如下:

let Doc = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/backend/Doc'))
  },'abc')
}

let Workbench = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/backend/Workbench'))
  },'abc')
}

可以简写为:

let Doc = (resolve)=>{
  return require.ensure([],()=>{
    resolve(require('@/view/backend/Doc'))
  },'abc')
}
let Workbench = (resolve)=>{
  return import('@/view/backend/Workbench') 
}
标签: webpack 懒加载 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码