vue路由、组件、图片懒加载

单页面应用如果不使用懒加载，会在首页初始化时加载全部的内容，导致首页面出现空白页，导致用户体验下降。解决方法：可以使用各种懒加载，比如路由懒加载。

1.vue异步组件技术-----异步加载

{ path: '/home', name: 'home', component: resolve => (['@/components/home'], resolve)}

非懒加载：

import Home from '@/components/home'

routes: [

path: '/',

name: 'Home'，

component: Home

]

懒加载：

routes: [

{

path: '/',

name: 'Home',

component: resolve => require(['@/components/Home'], resolve),

}

]

2.使用import

const 组件名 = () => import('组件路径')；

//下面3行代码，没有指定webpack ChunkName，每个组件打包成一个单独的js文件

const Home = () => import('@/components/home')

const Index = () => import('@/compomets/index')

const About = () => import('@/components/about')

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

把组件按组分块

const Home = () => import(/* webPackName: 'ImportFuncDemo' */ '@/components/home')

const Index= () => import(/* webPackName: 'ImportFuncDemo' */ '@/components/index')

const Abort= () => import(/* webPackName: 'ImportFuncDemo' */ '@/components/abort')

{ path: '/home', component: Home}, { path: '/abort', component: Abort}, { path: '/index', component: Index}

若是每个组件对应的webpackChunkName不同，则打包成不同的js文件，可以把组件按组分块。名称相同的则为同一js文件。

3.webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{ path: '/home', name: 'Home',

component: r => require.ensure([], () => r(require('@/components/home')), 'demo')}（最后的demo是该组件的chunkName）

{ path: '/abort', name: 'Abort',

component: r => require.ensure([], () => r(require('@/components/abort')), 'demo')}

{ path: '/index', name: 'Index',

component: r => require.ensure([], () => r(require('@/components/index')), 'demo1')}

//r就是resolve。

官方推荐如下写法，按模块划分懒加载

const list = r => require.ensure([], ()=>r(require('../components/list')), 'list');

const router = new Router( {

routes: [

{

path: '/list/blog',

component: 'list',

name: 'blog'

}

]

})

组件懒加载：

	<div>
  	<One-com></One-com>
  </div>
</template>

<script>
import One from './one';//第一种引入方法
const One = () => import('./one');//第二种引入方法
export default {
	components: {
  	'One-com': one;
    'One-com': resolve => (['./one'], resolve)//第三种引入方法
  },
  data() {
  	return {}
  }
}
</script>

图片懒加载

使用vue插件vue-lazyload实现图片懒加载

安装：npm install vue-lazyload --save

全局注册：

Vue.use(VueLazyload)
//配置项
Vus.use(VueLazyload, {
	preLoad: 1.3,
  error: 'dist/error.log',
  loading: 'dist/loading.gif',
  attempt: 1
})

preLoad: 表示lazyload的元素,距离页面底部距离的百分比.计算值为(preload - 1)

error: 加载失败后图片地址

loading: 加载时图片地址

attempt：图片加载失败后的重试次数，默认3次

使用： :src---->v-lazy

	<img v-lazy='img.'>
</div>