Vue按需加载的具体实现


Posted in Javascript onDecember 02, 2017

概念(懒加载)

当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,嗯,这样就更加高效了。

场景

xxx项目作为一个单页面应用,采用组件化的开发模式,每次启动首页都会加载全部组件,但此时只是访问了首页而已,就造成了大量组件污染加载的情况。

目的

只在访问当前页面时加载对应组件,避免页面组件全部加载。(按需加载)

实现

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'

// 定义路由,每个路由映射一个组件。
const Routers = [
  {
    path: '/',  // 路径
    component: resolve => require(['../components/member/index], resolve)  // 异步加载组件
  },
  {
    path: '/login',
    component: resolve => require(['../components/member/login'], resolve)
  }
]

const RouterConfig = {
  routes: Routers
}
// 创建router实例,并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
  el:'#app',
  router,
  // 将h作为createElement的别名是一个通用惯例。
  render: h =>(App) 
})

注意:

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,例如['moduleA','moduleB'],第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部使用这些模块。

示例代码中使用了异步的方式加载组件,其中require函数负责异步引入将要渲染的组件,而resolve则负责异步回调渲染组件。

babel-polyfill:对Promise进行转码编译;

npm install --save babel-polyfill

es6-promise-polyfill 解决Promise兼容性问题。关于不太了解Promise的同学请移步这里

npm install --save es6-promise-polyfill

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
如何让你的JS代码更好看易读
Dec 01 #Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 #Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 #Javascript
利用JS测试目标网站的打开响应速度
Dec 01 #Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 #Javascript
You might like
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JS中的phototype详解
2017/02/04 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
财务部岗位职责
2013/11/19 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2016入党心得体会范文
2016/01/06 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
Pandas数据类型之category的用法
2021/06/28 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫