vue的异步组件按需加载
当build打包后,app.js过大的时候,可以考虑用异步组件的方式。
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend"; export default {
name: "Home",
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
}
}
以下是异步组件加载方式:
export default {
name: 'Home', components: {
//异步组件加载方式
HomeHeader: () => import("./components/Header"),
HomeSwiper: () => import("./components/Swiper"),
HomeIcons: () => import("./components/Icons"),
HomeRecommend: () => import("./components/Recommend"),
HomeWeekend: () => import("./components/Weekend")
}
}
vue的异步组件按需加载的更多相关文章
- js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...
- Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- vue项目实现路由按需加载的3种方式
vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- Vue路由(组件)懒加载(异步)
传统的引入方式 import test from '@/components/test' { path: '/test', name: '测试页面', component:test }, 懒加载的方式 ...
- vue 单文件组件中样式加载
在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件 ...
- vue之vant组件下拉加载更多
vant地址:https://youzan.github.io/vant/#/zh-CN/intro 基础用法 List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部 ...
- vue+element树组件 实现树懒加载
本文连接https://www.cnblogs.com/aknife/p/11709255.html 一.页面样式 二.数据库 三.前端页面代码 <template> <el-tre ...
随机推荐
- Linux fdisk普通分区扩容
买了一个orangepi 然后用7.4GB的内存卡,写入了一个lubuntu镜像,用去3.6GB还有3.8GB没有用,因为要编译mt7601u进ubuntu中,需要用到内核文件 但是内核压缩包1.2G ...
- thinkphp本地调用Redis队列任务
1.安装配置好Redis 2.进入项目根目录文件夹输入cmd进入命令行 3.输入php think 查看php扩展 4.输入 php think queue:listen 启动队列监听
- spring-AOP框架(基于配置文件的方式配置AOP)
.xml: ref-指向,order-指定优先级
- WPF 控件总结
内容控件:1.Button:当Button.IsCancel="True"时,点击按钮,对话框关闭.当Button.IsDefault="True",按回车触发 ...
- RedHat7局域网下安装离线Ambari
1 Ambari介绍.安装与应用案例介绍 1.1 Ambari Ambari 跟 Hadoop 等开源软件一样,也是 Apache Software Foundation 中的一个项目,并且是顶级项目 ...
- Centos7上HBase的安装和配置
注意事项 HBase配置必须使用主机名,不支持直接配置IP地址.我尝试过,如果不使用主机名直接用IP,会导致HBase连接zk超时. > 设置主机名 hostnamectl set-hostna ...
- C#编程的最佳工具
C#是企业中广泛使用的编程语言,特别是那些依赖微软的程序语言.如果您使用C#构建应用程序,则最有可能使用Visual Studio,并且已经寻找了一些扩展来对您的开发进行管理.但是,这个工具列表可能会 ...
- 数据仓库3NF基础理论和实例
一.引言 最近在梳理大数据模式下的数据仓库数据模型,花了点时间,系统的回顾一下传统数据仓库数据模型设计的理论,作为笔记分享给大家,很多资料来自互联网和读过的数据仓库理论和实践相关的熟悉,无剽窃之心,共 ...
- git 对比两个分支差异
比如我们有 2 个分支:master, dev,现在想查看这两个 branch 的区别,有以下几种方式: 1.查看 dev 有,而 master 中没有的: git log dev ^master 同 ...
- Mongo查询分组
db.test.aggregate( {'$match':{"url":/http:\/\/www.baidu.cn\/member\/T107581\//}}, {'$group ...