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 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
js精度溢出解决方案
Dec 02 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
JavaScript基于用户照片姓名生成海报
May 29 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php的4种常见运行方式
2015/03/20 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
Python完全新手教程
2007/02/08 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python中的__slots__示例详解
2017/07/06 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
毕业生多媒体设计求职信
2013/10/12 职场文书
求职自荐信
2013/12/14 职场文书
《胡杨》教学反思
2014/02/16 职场文书
大学班级计划书
2014/04/29 职场文书
农业项目合作意向书
2015/05/08 职场文书