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 相关文章推荐
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
比较node.js和Deno
Apr 27 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
PHP脚本的10个技巧(3)
2006/10/09 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
php依赖注入知识点详解
2019/09/23 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
详解python中*号的用法
2019/10/21 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
10的分与合教学反思
2014/04/30 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
洗手间标语
2014/06/23 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
离职信范文
2015/06/23 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL