自己项目中的写法

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. 编程语言的发展历史剧。(参考https://baijiahao.baidu.com/s?id=1588675986991787716&wfr=spider&for=pc)

    1800年 约瑟夫·玛丽·雅卡尔(Joseph Marie Jacquard),设计出人类历史 上首台可设计织布机——雅卡尔织布机,对将来发展出其他可编程机器起了重要作用 1842年 阿达·洛夫莱斯( ...

  2. html页面的加载顺序

    页面加载顺序: 解析HTML结构加载外部脚本和样式表文件解析并执行脚本代码构造HTML DOM模型加载图片等外部文件页面加载完毕 window.onload = function () {  }  / ...

  3. HDU 5215 Cycle(dfs判环)

    题意 题目链接 \(T\)组数据,给出\(n\)个点\(m\)条边的无向图,问是否存在一个奇环/偶环 Sol 奇环比较好判断吧,直接判是否是二分图就行了.. 偶环看起来很显然就是如果dfs到一个和他颜 ...

  4. 原生js实现星星闪烁的效果

    星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...

  5. cordova 开发 android app 简要流程

    1. 安装cordova:npm install -g cordova --registry=https://registry.npm.taobao.org 2. 创建cordova工程:进入工作目录 ...

  6. IT人的格言警句

    程序员困境:我们通过编码谋生,但环境却正在摧毁我们这种谋生的能力. 在技术日新月异的IT行业,“专家”这个词其实是个危险信号,意味着你的知识距离老化不远了.IT工程师应该经常更换工作领域,了解多个领域 ...

  7. Qt删除文件夹

    写的软件需要进行文件夹的复制,开始不怎么懂就找了个拷贝文件夹的代码测试了一下,运行程序选择了源目录和目标目录相同进行拷贝,结果悲剧了.因为是递归拷贝,导致文件夹被嵌套N层,软件死机,强制结束后,产生的 ...

  8. matlab练习程序(模糊集图像增强)

    算法有很多变种.不过主要就是以下三步. 1.设计隶属度函数将图像从空间域变换到模糊集域. 2.设计模糊增强算子,在模糊集域对图像进行处理. 3.根据第1步的隶属度函数重新将图像从模糊集域变换到空间域. ...

  9. Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比--转载

     在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一 ...

  10. oracle_How to Recover Data (Without a Backup!)

    How to Recover Data (Without a Backup!) It's the classic career-limiting maneuver(职业限制机动): accidenta ...