自己项目中的写法

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. 02.ArrayList和HashTable

    ArrayList集合 数组的缺点: (1).数组只能存储相同类型的数据. (2).数组的长度要在定义时确定. 集合的好处: (1).集合可以存储多种不同类型的数据. (2).集合的长度是可以任意改变 ...

  2. Wpf ListView展示风格

    ListView数据绑定控件,通常是竖列展示,也可以通过改变ListView的布局来改变它的展示方式 如图展示: 主要需用修改的样式如下: <!--GridView Header样式 去除Gri ...

  3. django中自定义表名及字段名称

    在meta 类中指定表名,在字段中通过db_column指定列名如下所示 class Record(models.Model): content=models.CharField(max_length ...

  4. 探寻hashmap

    Hashmap源码 1.  构造器: a)获得默认数组大小:1>>4 :16 b) 获得负载因子:0.75:衡量hashmap的空间使用程度 i.过大:使用空间更加充分,但是查找效率变低, ...

  5. <转>MapReduce工作原理图文详解

    转自 http://weixiaolu.iteye.com/blog/1474172前言:  前段时间我们云计算团队一起学习了hadoop相关的知识,大家都积极地做了.学了很多东西,收获颇丰.可是开学 ...

  6. cf1072B. Curiosity Has No Limits(枚举)

    题意 题目链接 给出两个序列\(a, b\),求出一个序列\(t\),满足 \[a_i = t_i | t_{i + 1}\] \[b_i = t_i \& t_{i + 1}\] 同时,\( ...

  7. ng-repeat和ng-options区别

    ng-repeat ="x in XXX" ng-options="x.*** for x in XXX“ ng-repeat 写法 <select> < ...

  8. VC6.0静态编译注意事项

    选择静态编译(工程->常规->Microsoft基础类->使用MFC作为静态链接库)的时候,会报错:MSVCRTD.lib(MSVCRTD.dll) : error LNK2005: ...

  9. Tomcat无法正常启动start.bat 一闪而过、只显示USING 故障排除

    在云主机上配置tomcat的时候遇到的问题. 1. 开始的时候我将自己用的tomcat6绿色版打包放到了主机上,当我打开bin下面的时候startup.bat时,控制台一闪而过,查看log文件没有任何 ...

  10. docker 部署 nginx+php+mysql

    系统:centos7 使用root账户 开放80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent 安装docker yum ins ...