require.ensure(dependencies:String [],callback:function(require),errorCallback:function(error),chunkName:String)

require.ensure()接受三个参数:

第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖; 
。第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它; 
第三个参数errorCallback比较好理解,就是处理错误的回调; 
第四个参数chunkName则是指定打包的组块名称。

require.ensure()实现

const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')
const msite = r => require.ensure([], () => r(require('../page/msite/msite')), 'msite')
const search = r => require.ensure([], () => r(require('../page/search/search')), 'search')

import()实现

const home = () => import(/* webpackChunkName: "home" */ '../page/home/home')

vue-router懒加载的更多相关文章

  1. vue router 懒加载实现

    在vue-cli脚手架中router文件夹中有index.js文件,里面的内容是 import Vue from 'vue'import Router from 'vue-router'import ...

  2. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  3. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  4. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  5. vue实现懒加载的几种方法

    vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...

  6. vue组件懒加载(Load On Demand)

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand ...

  7. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  8. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  9. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

  10. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

随机推荐

  1. ELK对nginx日志进行流量监控

    ELK对nginx日志进行流量监控 一.前言 线上有一套ELK单机版,版本为5.2.1.现在想把nginx访问日志接入到elk里,进行各个域名使用流量带宽的统计分析.要把nginx日志传输到elk上, ...

  2. ELK展示NGINX访问IP地理位置图

    一.设置NGINX日志格式 [root@zabbix_server ~]# vim /etc/nginx/nginx.conf log_format access_json_log '{"@ ...

  3. Some ArcGIS Tools

    在矢量叠加,即将同一区域.同一比例尺的两组或两组以上的多边形要素的数据文件进行叠加产生一个新的数据层,其结果综合了原来图层所具有的属性.矢量叠加操作分为:交集(Intersect).擦除(Erase) ...

  4. Springboot + Mybatis + Ehcache

    最近在做一个项目,为处理并发性较差的问题,使用了Mybatis二级缓存 但在多表联合查询的情况下,Mybatis二级缓存是存在着数据脏读的问题的 两天就是在想办法解决这个数据脏读的问题 考虑到简易性. ...

  5. Redis主从复制配置+哨兵模式

    架构设计: master:s0 slave:s1.s2 主机映射信息如下: 192.168.32.100 s0 192.168.32.101 s1 192.168.32.102 s2 1.安装Redi ...

  6. 原来你是这样的 jsonp(原理与具体实现细节)

    前言 原文地址 仓库地址 jsonp(JSON with padding)你一定不会陌生,前端向后端拿数据的方式之一,也是处理跨域请求的得利助手. 我们早已习惯,早已熟练了jQ或者zepto的ajax ...

  7. 关于JavaScript的事件绑定

    js事件绑定的几种方式 JavaScript中有三种常用的绑定事件方法: 1. 在DOM元素中直接绑定: 2. 在JavaScript代码中绑定: 3. 绑定事件佳妮婷函数. 一.在DOM元素中直接绑 ...

  8. maven 项目下 Maven Dependencies 下列表为空

    问题如题,如下图: 解决: 选中 Maven Dependencies ,右键 属性 如下图: 把   resolve dependencies from workspace projects   这 ...

  9. 2019CCPC秦皇岛赛区(重现赛)- F

    链接: http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1006&cid=872 题意: Z 国近年来一直在考虑遏制国土沙 ...

  10. 洛谷-p5410-扩展KMP模板

    链接: https://www.luogu.org/problem/P5410#submit 题意: 有两个字符串aa,bb,要求输出bb与aa的每一个后缀的最长公共前缀 思路: 扩展kmp模板, 上 ...