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中的函数
Jan 22 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
angular动态表单制作
Feb 23 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
原生js实现自定义滚动条组件
Jan 20 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php 删除记录实现代码
2009/03/12 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
css配合jquery美化 select
2013/11/29 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue实现点击按钮下载文件功能
2019/10/11 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android