大项目中，为了提高初始化页面的效率，路由一般使用懒加载模式，一共三种实现方式。
（1）第一种写法：

component: (resolve) => require(['@/components/One'], resolve)

　　

（2）第二种写法：

component: () => import('@/components/Two')

（3）第三种写法：

components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')

PS：

  • 一般常用第二种简写
  • 第三种中，’group-home’是把组件按组分块打包, 可以将多个组件放入这个组中，在打包的时候Webpack会将相同 chunk 下的所有异步模块打包到一个异步块里面。

vue路由懒加载的更多相关文章

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

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

  2. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

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

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

  4. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

  5. vue 路由懒加载 使用，优化对比

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

  6. vue路由懒加载，babel-loader无法处理/使用 import

    使用vue-router懒加载,代码如下: 但是npm run dev 的时候 babel-loader报错如下: 查阅各种资料终于解决. 问题原因: 这种情况下的 import 属于异步引用组件,需 ...

  7. 两段代码实现vue路由懒加载

    const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', co ...

  8. vue路由懒加载方式

    方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...

  9. vue路由懒加载 及import

随机推荐

  1. GET与POST类型接口

    工作当中经常用到这两种类型的接口,一直对它们两个的区别一知半解,并不能从原理上说出区别. GET和POST最直观的区别应该就是GET将url包含在参数当中,POST通过request body(请求主 ...

  2. 手动用tomcat启动war包，无法访问web项目

    先说一下自己采的小坑,网上大多解答都是复制来复制去,不说重点在哪.我这里简单总结下访问路径问题 一.用idea打成war包,具体步骤如下图: 步骤:在项目配置选Artifacts新建Web Appli ...

  3. 解决Jenkins邮件配置问题

    最近要配置Jenkins邮箱,由于一直报如下错误,又没办法解决,所以想到了另外的办法发邮件. 我采用shell脚本执行python命令的方式来发邮件: #!/bin/bash cd /software ...

  4. Java的selenium代码随笔（5）

    //以下七种方法主要用于生成年.月.日.小时.分钟和秒的信息,用于生成保存截图的文件目录名和文件名/** 格式化输出日期* * @return 返回字符型日期*/public static Strin ...

  5. WPF中利用控件的DataContext属性为多个TextBox绑定数据

    工作上需要从给定的接口获取数据,然后显示在界面的编辑框中,以往肯定会一个一个的去赋值,但这样太麻烦而且效率很低,不利于维护,于是想到了数据绑定这一方法,数据绑定主要利用INotifyPropertyC ...

  6. js 实现的页面图片放大器以及 event中的诸多 x

    背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...

  7. Go语言公开或未公开的标识符

    Go语言公开或未公开的标识符的基本概念 Go语言支持从包里公开或者隐藏标志符,通过这个特性,可以让用户按照自己的规则控制标识符的可见性. Go语言中的可见性,是通过声明类型的大小写来进行区别的. 例如 ...

  8. CAN报文 Intel 格式与Motorola 格式的区别

    当一个信号的数据长度不超过 1 个字节(8 位)时,Intel 与 Motorola 两种格式的 编码结果没有什么不同,完全一样.当信号的数据长度超过 1 个字节(8 位)时,两者的编码结果出现 了明 ...

  9. gcc __thread关键字

    https://blog.csdn.net/xj178926426/article/details/54345449 EventLoop.cpp __thread EventLoop* t_loopI ...

  10. python实现加密

    1.md5加密 hashlib 库中包括如SHA1.SHA224.SHA256.SHA384.SHA512和MD5算法等 >>> import hashlib>>> ...