大项目中，为了提高初始化页面的效率，路由一般使用懒加载模式，一共三种实现方式。
（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. Codeforces Round #546 (Div. 2)-D - Nastya Is Buying Lunch

    这道题,神仙贪心题... 题意就是我给出数的顺序,并给出多个交换,每个只能用于相邻交换,问最后一个元素,最多能往前交换多少步. 我们考虑这样一个问题,如果一个这数和a[n]发生交换,那么这个数作为后面 ...

  2. iview render input每输入一个字符就会自动跳出焦点

    假如你绑定的table的数据是tableData,input数据改变的时候你把整行的数据替换掉,就不会造成table重新渲染,导致input失焦了 h('InputNumber', { props: ...

  3. 【学习总结】GirlsInAI ML-diary day-9-dict字典

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day9 认识dict字典 新的数据类型dict. dict全称dictionary,在其他语言中也称为map,使用键-值( ...

  4. js05-DOM对象二

    一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_pa ...

  5. 【win7】安装php7.3及扩展

    php7.3插件php-redisphp-igbinaryphp-amqp [初识RabbitMQ,附RabbitMQ+PHP演示实例]https://www.cnblogs.com/miketwai ...

  6. Android NDK(C++) 双进程守护

    双进程守护如果从进程管理器观察会发现新浪微博.支付宝和QQ等都有两个以上相关进程,其中一个就是守护进程,由此可以猜到这些商业级的软件都采用了双进程守护的办法. 什么是双进程守护呢?顾名思义就是两个进程 ...

  7. 笔记本装双系统！win10+Linux！所有的坑自己一个个爬过来，纪念一下。

    笔记本装双系统!win10+Linux!所有的坑自己一个个爬过来,纪念一下. 2018年09月16日 21:27:19 Corax_2ven 阅读数:14038   写在前面,装了大概5遍,装了删删了 ...

  8. 安装mysql8.0出现服务无法启动，服务没报告任何错误

    改为net start mysql80 参考https://blog.csdn.net/gzejia/article/details/82156994

  9. 解决Docker安装MySQL不区分大小写问题

    Docker安装MySQL忽略大小写问题的问题连接MySQL: 查看当前mysql的大小写敏感配置 show global variables like '%lower_case%'; +------ ...

  10. 修改帝国cms栏目后，如何更新

    修改栏目后,要依次做如下更新: 1.    2.  3.    如果只是修改了栏目里的属性,只需要做第三步就行了