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 相关文章推荐
jquery自定义函数的多种方法
Jan 09 Javascript
javascript类型转换使用方法
Feb 08 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
Vue实现todolist删除功能
2018/06/26 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
ipad上运行python的方法步骤
2019/10/12 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
python pymysql库的常用操作
2020/10/16 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
美容院营销方案
2014/03/05 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
万能检讨书2000字
2014/10/17 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript