大项目中，为了提高初始化页面的效率，路由一般使用懒加载模式，一共三种实现方式。
（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. NOIP2000提高组复赛C 单词接龙

    题目链接:https://ac.nowcoder.com/acm/contest/248/C 题目大意: 略 分析: 注意点:1.前缀和后缀的公共部分应该选最短的.2.如果两个字符串前缀和后缀的公共部 ...

  2. centos7之zabbix3.2搭建

    环境介绍: centos7.4 zabbix3.2 一.zabbix介绍 zabbix官网:https://www.zabbix.com/ zabbix下载页面:https://www.zabbix. ...

  3. mysql 的存储引擎介绍

    在数据库中存的就是一张张有着千丝万缕关系的表,所以表设计的好坏,将直接影响着整个数据库.而在设计表的时候,我们都会关注一个问题,使用什么存储引擎.等一下,存储引擎?什么是存储引擎? 什么是存储引擎? ...

  4. Python——SQLite

    一.连接数据库 import sqlite3 conn = sqlite3.connect('数据库名.db') 二.插入 import sqlite3 conn = sqlite3.connect( ...

  5. Python——Django-form表单提交

    一.提交的注意事项 1. form不是from,所有获取用户输入的标签都应该放在form里面, input并且必须要有name属性 2. action属性控制往哪儿提交,method一般都设置成pos ...

  6. jsp篇 之 基本概念

    Jsp概念: 1.jsp是什么 jsp全称Java Server Pages,是一种[动态网页开发技术]. .html文件是静态页面 .jsp 文件是动态页面 jsp页面允许我们在html代码中[嵌入 ...

  7. Tesseract-ocr 安装与使用

    Tesseract(识别引擎),一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,与Microsoft Offic ...

  8. mpvue——另类支持v-html

    前言 最近在用mpvue将之前写的vue项目转化为小程序,但是不支持v-html,也不能说不支持,只不过转化为了rich-text的富文本组件,但是图片显示不全啊 本来想让后端内嵌个样式的,还是算了, ...

  9. Linux基本命令总结（五）

    接上篇: 21,在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是chang ...

  10. 第十节：基于MVC5+Unity+EF+Log4Net的基础结构搭建

    一. 前言 本节继续探讨一种新的框架搭建模式,框架的结构划分和上一节是相同的,本节IOC框架换成了Unity,并且采用构造函数注入的方式,另外服务层的封装模式也发生了变化,下面将详细的进行探讨. (一 ...