vue路由懒加载
大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式。
(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路由懒加载的更多相关文章
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- vue 路由懒加载 resolve vue-router配置
使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...
- vue 路由懒加载 使用,优化对比
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...
- vue路由懒加载,babel-loader无法处理/使用 import
使用vue-router懒加载,代码如下: 但是npm run dev 的时候 babel-loader报错如下: 查阅各种资料终于解决. 问题原因: 这种情况下的 import 属于异步引用组件,需 ...
- 两段代码实现vue路由懒加载
const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', co ...
- vue路由懒加载方式
方式一:结合Vue的异步组件和Webpack的代码分析 const Home = resole => {require.ensure(['../components/Home.vue'],() ...
- vue路由懒加载 及import
随机推荐
- 08-JavaScript中的函数
JavaScript中的函数 1.函数简介 函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重 ...
- Java泛型中<? extends E>和<? super E>的区别
这篇文章谈一谈Java泛型声明<? extends E>和<? super E>的作用和区别 <? extends E> <? extends E> 是 ...
- OpenStack-Nova(4)
一. Nova概述 使用OpenStack Compute来托管和管理云计算系统.OpenStack Compute是基础架构即服务(IaaS)系统的主要部分.主要模块在Python中实现. Open ...
- NOIP2000提高组复赛C 单词接龙
题目链接:https://ac.nowcoder.com/acm/contest/248/C 题目大意: 略 分析: 注意点:1.前缀和后缀的公共部分应该选最短的.2.如果两个字符串前缀和后缀的公共部 ...
- 一、Mysql安装
一.官网下载:https://dev.mysql.com/downloads/mysql/ 二.解压下载好的压缩包,本人存放的位置如下: 如下图解压后的文件目录,因版本的差异.一开始解压后的文件夹下可 ...
- HDOJ5543 Pick The Sticks
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5543 题目大意:有n个金条,每个金条有长度和价值,给一个长度为L的容器,当金条在容器两端的时候,只要重 ...
- Java【初识篇】语言概述
什么是计算机语言 语言:是人与人之间用于沟通的一种方式.例如:中国人与中国人用普通话沟通.而中国人要和英国人交流,就要学习英语.计算机语言(编程语言):人与计算机交流的方式.如果人要与计算机交流,那么 ...
- Mysql注入小tips --持续更新中
学习Web安全好几年了,接触最多的是Sql注入,一直最不熟悉的也是Sql注入.OWASP中,Sql注入危害绝对是Top1.花了一点时间研究了下Mysql类型的注入. 文章中的tips将会持续更新,先说 ...
- 使用Eclipse创建动态的web工程
使用Eclipse创建动态的web工程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改工作区的编码 1>.点击Window选择Preferences 2>.将默 ...
- saltstack主机管理项目:今日总结(六)
一.总目录 二.具体代码 salt #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:luoahong import os,sys if __ ...