自己项目中的写法

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 懒加载的更多相关文章

  1. vue组件懒加载

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

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

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

  3. Vue图片懒加载插件

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

  4. vue 路由懒加载 使用,优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

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

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

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

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

  7. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  8. vue-router和webpack懒加载,页面性能优化篇

    在vue单页应用中,当项目不断完善丰富时,即使使用webpack打包,文件依然是非常大的,影响页面的加载.如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加 ...

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

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

随机推荐

  1. 2017年11月3日 VS三大类&数组&VS的冒泡排序&集合&泛型集合

    三大类 共分为两个大类: 基本数据型&引用类型 基本数据型---值类型---整型---常用的整型: Int , 长整型:  Long, 小整型: byle, 中整型 short --浮点型 - ...

  2. 动态网页开发jsp

    1.动态网页的优势?    ①交互性:即网页会根据用户的要求和选择而动态改变和显示内容.    ③自动更新:即无需改变页面代码,便会自动生成新的页面内容.    ④随机性:即当不同的时间.不同的人访问 ...

  3. 【代码笔记】JTable 、TableModel的使用3

    在java中插入Table,并通过TableModel插入表格初始化状态后,如果需要第一行标题栏进行重命名,直接利用TableModel接口去实现列名修改,在图形显示中是无法实现的. 这里需要用到 J ...

  4. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  5. 22_AOP_切面——静态切面

    [Spring AOP 如何定位连接点] 1.增强提供了连接点的方位信息:如织入到方法前面.后面等. 2.切点描述的是织入到哪些类的哪些方法上. [切点] Spring通过org.springfram ...

  6. EL表达式的内置对象

    在EL表达式中,无需创建就可以使用的对象称之为EL隐藏(隐含.内置)对象.在EL中一共有11个隐藏对象,它们都与Map相似.其中10是Map,一个是 PageContext. 参数隐藏对象 这些隐藏对 ...

  7. Android学习——Fragment与Activity通信(一)

    学会了在Activity中加载Fragment的方法之后,接下来便需要学习Activity和Fragment之间的通信.这一节先学习如何把Activity中的信息传递给Fragment. 基本过程 在 ...

  8. SONA Topology

    N多年以前就有有人设计传了一种类似“房子”状结构的拓扑图,在Cisco的文档中可以查到这种叫SONA.这是个非常神奇的设计,适合用于中小型网络,之所以这么讲,是因为在这个结构下,但凡任何一台接入层或者 ...

  9. 设计模式——原型模式(Prototype Pattern)

    原型模式:用原型实例制定创建对象的种类,并且通过拷贝这些原型创建新的对象. UML 图: 原型类: package com.cnblog.clarck; /** * 原型类 * * @author c ...

  10. 每日linux命令之kill

    1.命令格式: kill[参数][进程号] 2.命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果任无法终止该程序可用“-KILL” 参数,其发送的信号为S ...