Vue项目按需加载（项目记录）

为什么需要懒加载？vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时需要加载的内容过多，时间过长，会长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

1.懒加载(Vue异步组件技术)

// 路由
{ path: '/home', name: 'home', component: resolve => require(['@/components/Home'],resolve) }
// 组件
components: {
  historyTab:resolve => {
  require(['../../component/historyTab/historyTab.vue'],resolve)
  },   
},

2.webpack的require.ensure技术

{ path: '/list', name: 'List', component: resolve => require.ensure([], () => resolve(require('../components/List')), 'chunkName') }

//多个路由指定相同的chunkName，会合并打包成一个js文件

3.es6的import

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件　
const Demo1 = () => import('@/components/Demo1') 
const Demo2 = () => import('@/components/Demo2')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。

// const Demo1 = () => import(/* webpackChunkName: 'Demo1' */ '../components/Demo1')
// const Demo2 = () => import(/* webpackChunkName: 'Demo1' */ '../components/Demo2')
export default new Router({
    routes: [
        {
            path: '/demo1',
            name: 'Demo1',
            component: Demo1
        },
        {
            path: '/demo2',
            name: 'Demo2',
            component: Demo2
        }
    ]
})