vue實現懶加載的幾種方法

vue實現惰性加載是基於：

1.ES6的異步機制

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

2. webpack的代碼分割功能

require.ensure(依賴， 回調函書， [chunk名字])

************************

懶加載方法1、

//此時每一個組件單獨使用的js會單獨在一個文件里加載，每一個文件加載一次
let Layout = (resolve) => {
  return require.ensure([], () => {
    resolve(require('@/views/layout'))
  })
}

若須要將相同功能的組件捆綁進行懶加載，則需爲捆綁添加chunk名字，以下：

//此時會將user與login的js文件捆綁在一塊兒，加載一次
const user= (resolve) => {
    return require.ensure([], () => {
        resolve(require('@/components/user'))
    }, 'inter')
}
const login= (resolve) => {
    return require.ensure([], () => {
        resolve(require('@/components/login'))
    }, 'inter')
}

懶加載方法二：

//利用webpack自帶的import函數按需加載相應的組件
let user= (resolve) => {
  return import('@/components/user')
}

 配置部分則不須要改變，常規配置便可：

var router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/user',
            name: 'user',
            component: user
        }]
})