vue-router懒加载
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懒加载的更多相关文章
- vue router 懒加载实现
在vue-cli脚手架中router文件夹中有index.js文件,里面的内容是 import Vue from 'vue'import Router from 'vue-router'import ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- vue组件懒加载
vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...
- 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- vue实现懒加载的几种方法
vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...
- vue组件懒加载(Load On Demand)
在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand ...
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
- vue 路由懒加载 resolve vue-router配置
使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
随机推荐
- Perl环境安装
在我们开始学习 Perl 语言前,我们需要先安装 Perl 的执行环境. Perl 可以在以下平台下运行: Unix (Solaris, Linux, FreeBSD, AIX, HP/UX, Sun ...
- 关于shell中函数调用的理解
今天做一个试题就是调用函数的问题,题意如下: 执行shell脚本,打印一个如下的水果菜单: 1.apple 2.pear 3.banana 4.cherry 当用户输入对应的数字选择水果的时候,告诉他 ...
- 解决remix在线编译器连接本地私有链环境不成功的问题
一.部署合约到私有链环境 选择"environment"里的"Web3 Provider" 弹出RPC连接地址输入框 输入我们Geth客户端安装服务器的IP:9 ...
- 逻辑卷管理(LVM)
LVM:Logical Volume Management 逻辑卷管理 LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性. 传统磁盘管理:我们上层是直接访问文件系统,从而对底层的物 ...
- 爱搞事情的webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...
- H5微信分享相关规范
微信分享 用户调用微信的分享功能,可以自定义分享的title和描述,以及小图标和链接.可以分享到群.好友.朋友圈.QQ.QQ空间等. 分享设计规范 分享标题:14字以内,建议使用朋友般亲切的口吻 分享 ...
- MySQL-InnoDB锁(一)
本文主要记录InnoDB存储引擎中锁的关键点,下篇文章通过实例确认加锁的范围. InnoDB中的锁 1. 锁提供数据完整性和一致性 2. InnoDB行级锁:共享锁(S)和排他锁(X). 为了支持多粒 ...
- FastDFS为什么要结合Nginx?
为什么选择Nginx Nginx 是一个很牛的高性能Web和反向代理服务器, 它具有有很多非常优越的特性: 在高连接并发的情况下,Nginx是Apache服务器不错的替代品: Nginx在美国是做虚拟 ...
- 题解 最长上升序列2 — LIS2
最长上升序列2 - LIS2 Description 已知一个 1 ∼ N 的排列的最长上升子序列长度为 K ,求合法的排列个数. Input 输入一行二个整数 N , K ( K ≤ N ≤ 15) ...
- Error from server (NotFound): the server could not find the requested resource (get services http:heapster:)
kubectl top pod --all-namespaces Error from server (NotFound): the server could not find the request ...