多语言展示
当前在线:784今日阅读:3今日分享:40

Vue实战051:各种懒加载技术实现

懒加载(Load On Demand)也称之为延迟加载,是一种按需加载加载组件的数据获取方法,当用户滚动页面的时候自动获取更多的数据,这样不仅缩短了系统响应时间,也提升了系统性能,更提高了用户的体验感同时最大程度上减少服务器端的资源耗用。
工具/原料

懒加载

方法/步骤
1

为什么需要懒加载当我们项目很大的时候,打包应用后JavaScript 包会非常大,在首次载入页面的需要加载的内容会很多,这样加载的时间就很长,一般一个页面加载超过5s就会影响用户的体验感,甚至导致大量的用户流失。

2

非懒加载的路由配置import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Home from './views/Home.vue' export default new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [  {  path: '/',  name: 'home',  component: Home  },  ] })

3

Vue异步加载Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。使用vue的异步组件技术进行vue-router配置路由可以实现懒加载 ,这种情况下一个组件生成一个js文件。

4

ES6 import()加载这个import与前面非懒加载的路由配置中的import(静态加载)有点不同,这里是采用ES6语言实现的动态加载,使用ES6提出的import()方法进行vue-router配置路由实现懒加载,每个组件打包成一个js文件,也可以指定相同的webpackChunkName按组打包js文件,个人比较喜欢使用这个方案,方便快捷。

5

require.ensure() 加载require.ensure() 是webpack提供的一种异步加载技术,可以实现按需加载资源包括js,css等文件。使用require.ensure() 方法进行vue-router配置路由实现懒加载,它可以将require中的文件进行单独打包,每个组件打包成一个js文件,也可以指定相同的ChunkName按组打包js文件。

6

组件异步加载除了通过路由实现懒加载我们还可以通过组件实现懒加载,一般我们引入组件的时候都是通过import静态调用的,其实这里我们可以借用路由懒加载的思路,使用ES6提出的import()方法进行动态载入组件,当组件被调用的时候才被渲染出来。

推荐信息