vue webpack 懒加载
自己项目中的写法
const router = new Router({
routes: [
{
path: '/index',
component: (resolve) => {
require(['../components/index/index'], resolve) // 这里是你的模块 不用import去引入了
}
}
]
})
第二种:
正常写法
const router = new Router({
routes: [
{
path: '/hyh',
component: hyh,
name: 'hyh'
}
]
})
const hyh = resolve => {
import ('@/components/index/hyh').then(modul =>{
resolve(module)
})
}
第三种
// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载
const router = new Router({
routes: [
{
path: '/list/blog',
component: list,
name: 'blog'
}
]
})
vue webpack 懒加载的更多相关文章
- vue组件懒加载
vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...
- 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- vue 路由懒加载 使用,优化对比
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...
- vue实现懒加载的几种方法
vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- vue-router和webpack懒加载,页面性能优化篇
在vue单页应用中,当项目不断完善丰富时,即使使用webpack打包,文件依然是非常大的,影响页面的加载.如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加 ...
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
随机推荐
- 如何用 windows+github搭建一个优美的hexo博客
1.Hexo简单介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 风一般的速度Hexo基于Nod ...
- mysql 语句学习一 关于系统信息的查询
首先说一下,SQL语句是不区分大小写的. 1.SELECT VERSION(); -- 查询当前版本号 2.SELECT CURRENT_TIME(); -- 查询当前时间 3.S ...
- SQLAlchemy的使用---M2M增删改查
from sqlalchemy.orm import sessionmaker from sqlalchemy_M2M import engine, Girls, Boys Session = ses ...
- UITableViewCell 分割线如何满屏
在iOS7中,UITableViewCell左侧会有默认15像素的空白.设置setSeparatorInset:UIEdgeInsetsZero 能将空白去掉. 但是在iOS8中,设置setSepar ...
- dispatchTouchEvent,onTouchEvent与onInterceptTouchEvent
1.首先明白一个常识:View 没有onInterceptTouchEvent事件,而ViewGroup这三个事件都有,是viewgroup继承View之后才加了一个方法叫onIntercepTouc ...
- ubuntu14.04安装rabbitmq
ubuntu14.04安装rabbitmq及配置 1.修改/etc/apt/sources.list文件 命令:vi /etc/apt/sources.list 在最后一行加上:deb http: ...
- bootstrap时时提醒填入数据是否与数据库数据重复
standardcode: { group: '.col-sm-4',//对应前台input的class占用宽度 validators: { notEmpty: { message: '请输入标准代号 ...
- 摩拜ofo挥师三四线市场 第二梯队面临"团灭"危机
共享单车领域,在一二线主要城市的大规模扩张时期结束,行业内头部企业目标向三四线市场的转移挤压了当地共享单车企业的生存空间,第二梯队的创业公司正面临被“杀死”的危机.上海有多少辆共享单车?答案是150万 ...
- python课程笔记
python变量原理:以数值为主,数字存储在内存中,分配给不同的变量.与C刚好相反 Python中,有3种内建的数据结构:列表.元组和字典.1.列表 list是处理一组有序项目的数据结构,即你 ...
- 诊断GRID无法启动问题
诊断 Grid Infrastructure 启动问题 (文档 ID 1623340.1)