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 模式设计之工厂模式详细说明
May 10 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
JS实现简单日历特效
Jan 03 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python实现统计代码行的方法分析
2017/07/12 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python PyTorch预训练示例
2018/02/11 Python
python cs架构实现简单文件传输
2020/03/20 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
英国航空官网:British Airways
2016/09/11 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
信息管理专业自荐书
2014/06/05 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
赢在中国观后感
2015/06/02 职场文书
四风之害观后感
2015/06/09 职场文书
python中的被动信息搜集
2021/04/29 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle