解决spa页面首屏加载慢的方式笔记

1.减少入口文件的体积

路由懒加载:在需要的时候进行加载,按需加载
前提:进行懒加载的子模块需要是一个单独的文件,所以要实现懒加载,就得先将进行懒加载的子模块(子组件)分离出来
vue router 支持开箱即用的动态导入,意味着你可以使用动态导入代替静态导入

路由懒加载实现方式:

1 .异步组件

{path: '/home',name: 'Home',component: resolve => require(['@/components/Home'],resolve)
},{path: '/index',name: 'Index',component: resolve => require(['@/components/Index'],resolve)
},

2.使用import

{
未指定webpackChunkName,所以每个组件打包成一个js文件path: '/home',component: () => import('@/components/Home')
}, {
//指定webpackChunkName,所以相同的webpackChunkName会合并打包成一个js文件path: '/index',component: () => import(/* webpackChunkName: 'importPage' */ '@/components/Home')
}, 

3.require.ensure()

//webpack提供的require.ensure(), 相同的webpackChunkName会合并打包成一个js文件
{path: '/home',name: 'Home',component: r => require.ensure([], () => r(require('@/components/Home')), 'page1')
}, {path: '/index',name: 'Index',component: r => require.ensure([], () => r(require('@/components/Index')), 'page1')
}

2.静态资源本地缓存

  1. 后端返回的资源,采用http缓存

3. ui框架按需引入,开发过程中可能不止用到一个组件库,尽量不要全局引入

4.避免组件重复打包

在webpack的config文件中,修改CommonsChunkPlugin的配置,设置minChunks为2,表示会把使用两次次以上的包抽离出来,放到公共依赖文件中,避免重复加载组件爱你

5. 压缩图片资源,大量使用的图标啥的,使用雪碧图,使用background-position设置它的偏移量来显示图片,像logo等图片放在assets文件夹下,其余的图片放在静态托管目录public里面

6. 使用ssr服务端渲染

vue可以使用Nuxt.js实现服务端渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/229652.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务Redis-Session共享登录状态

一、背景 随着项目越来越大,需要将多个服务拆分成微服务,使代码看起来不要过于臃肿,庞大。微服务之间通常采取feign交互,为了保证不同微服务之间增加授权校验,需要增加Spring Security登录验证,为了多个服务…

关于MSSQL存储过程的功能和用法

MSSQL存储过程是一种在Microsoft SQL Server数据库中存储和执行SQL代码的数据库对象。它可以用于数据处理和计算、数据库管理、事务处理以及实现安全性等多种功能。 以下是MSSQL存储过程的主要功能和用法: 数据处理和计算:可以使用MSSQL存储过程进行数…

#投屏,数据传输,局域网,远程,视频分享方式

步骤: 打开蓝牙配对连接 手机与电脑: 手机主动连接不上。电脑却可以连接手机。 连接上了,手机却不能向电脑传输文件,电脑可以向手机传输文件。 手机不能发送文件,很奇怪。但是电脑却可以向手机发送文件。 而且新老…

常用网安渗透工具及命令(扫目录、解密爆破、漏洞信息搜索)

目录 dirsearch: dirmap: 输入目标 文件读取 ciphey(很强的一个自动解密工具): john(破解密码): whatweb指纹识别: searchsploit: 例1: 例2: 例3&…

Git----学习Git第一步基于 Windows 10 系统和 CentOS7 系统安装 Git

查看原文 文章目录 基于 Windows 10 系统安装 Git 客户端基于 CentOS7 系统安装部署 Git 基于 Windows 10 系统安装 Git 客户端 (1)打开 git官网 ,点击【windows】 (2)根据自己的电脑选择安装,目前一般w…

【自顶向下看Java——深度剖析抽象类和接口】

系列文章目录 欢迎大家订阅《计算机底层原理》、《自顶向下看Java》专栏、能够帮助到大家就是对我最大的鼓励、我会持续为大家输出优质内容,敬请期待! 系列文章目录 文章目录 前言 一、抽象类 什么是抽象类? 为什么要使用抽象类? …

@Data@NoArgsConstructor@AllArgsConstructor 这几个常用注解什么意思?

这三个注解通常用于简化Java类的开发,特别是在使用一些框架时,如Lombok。让我们逐个解释这些注解的作用: 1. Data Data 是 Lombok 提供的一个组合注解,它包含了一组常用注解的功能,如 ToString、EqualsAndHashCode、…

一种解决Qt5发布release文件引发的无法定位程序输入点错误的方法

目录 本地环境问题描述分析解决方案 本地环境 本文将不会解释如何利用Qt5编译生成release类型的可执行文件以及如何利用windeployqt生成可执行的依赖库,请自行百度。 环境值操作系统Windows 10 专业版(22H2)Qt版本Qt 5.15.2Qt Creator版本5.0…

K8S的一个pod中运行多个容器

通过deployment的方式部署 创建一个deployment文件 [rootk8s-master1 pods]# cat app.yaml apiVersion: apps/v1 kind: Deployment metadata:name: dsfnamespace: applabels:app: dsf spec:replicas: 1selector:matchLabels:app: dsftemplate:metadata:labels:app: dsfspec:i…

P2P如何使用register_attention_control为UNet的CrossAttention关联AttentionStore

上次的调试到这里了,写完这篇接着看,prepare_latents_ddim_inverted 如何预计算 inversion latents: /home/pgao/yue/FateZero/video_diffusion/pipelines/p2p_ddim_spatial_temporal.py 1. 原始的UNet3D的CrossAttention和SparseCausalAtte…

深度学习中的潜在空间

1 潜在空间定义 Latent Space 潜在空间:Latent ,这个词的语义是“隐藏”的意思。“Latent Space 潜在空间”也可以理解为“隐藏的空间”。Latent Space 这一概念是十分重要的,它在“深度学习”领域中处于核心地位,即它是用来学习…

C#基础知识 - 操作数与运算符篇

C#基础知识 - 操作数与运算符篇 4.1 表达式 - 操作数与运算符组成4.1.2 C#中常见的表达式类型:4.1.2 表达式示例 更多C#基础知识详解请查看:C#基础知识 - 从入门到放弃 4.1 表达式 - 操作数与运算符组成 C#中,表达式(expression…

kafka入门(四):kafka生产者发送消息

创建生产者实例和构建消息之后,就可以开始发送消息了。 发送消息主要有三种模式:发后即忘、同步、异步。 发后即忘: 就是直接调用 生产者的 send方法发送。 发后即完,只管往 kafka中发送消息,而不关心消息是否正确…

用GitBook制作自己的网页版电子书

用GitBook制作自己的网页版电子书 前言 几年前阅读过其他人用GitBook创建的文档,可以直接在浏览器中打开,页面干净整洁,非常清爽,至今印象深刻。 GitBook非常适合用来为个人或团队制作文档,对于我这种偶尔写博客的人…

和鲸科技CEO范向伟受邀出席港航数据要素流通与生态合作研讨会,谈数据资产入表的战略机会

近日,由上海虹口数字航运创新中心、龙船(北京)科技有限公司(下简称“龙船科技”)、华东江苏大数据交易中心联合举办的“港航数据要素流通与生态合作研讨会”圆满落幕,来自港航领域的近百名企业代表共同参与…

【Spark面试】Spark面试题答案

目录 1、spark的有几种部署模式,每种模式特点?(☆☆☆☆☆) 2、Spark为什么比MapReduce块?(☆☆☆☆☆) 3、简单说一下hadoop和spark的shuffle相同和差异?(☆☆☆☆☆…

Spring Boot Docker Compose 支持中文文档

本文为官方文档直译版本。原文链接 Spring Boot Docker Compose 支持中文文档 引言服务连接自定义镜像跳过特定的容器使用特定Compose文件等待容器就绪控制 Docker Compose 的生命周期激活 Docker Compose 配置文件 引言 Docker Compose 是一种流行的技术,可用于为…

黑马头条--day02--2文章详情

一.上传之前的配置 1.上传js和css文件 在minio中创建leadnews桶, 在leadnews下面创建/plugins目录,在该目录下面分别创建js和css目录, 也就是/plugins/css和/plugins/js,向css中上传以下index.css: html {overflow-x: hidden; }#app {position: rel…

GPT实战系列-探究GPT等大模型的文本生成

GPT实战系列-探究GPT等LLM文本生成 GPT专栏文章: GPT实战系列-Baichuan2等大模型的计算精度与量化-CSDN博客 GPT实战系列-GPT训练的Pretraining,SFT,Reward Modeling,RLHF-CSDN博客 GPT实战系列-ChatGLM3本地部署CUDA111080Ti…

kali虚拟机无网络

1.查看虚拟机的网卡模式 在虚拟机设置里,一般选择桥接模式,也可以选择NAT模式。 2、你的IP地址是否写死了(设置为静态IP) vim编辑模式下的命令: 按a或i进入编辑模式,然后按esc键退出编辑模式,s…