VuePress文档初始化请求过多问题探讨

1. 背景

公司有部门使用VuePress 1.0搭建平台的帮助文档,前期文档不是很多,所以没有暴露出特别明显的问题。但随着文档的逐步迭代和内容的增多,出现了大量的并发请求,总共有218个请求,导致服务器带宽耗尽、响应速度下降,进而影响了文档的使用。

alt

2. 问题分析

VuePress 1.0是基于Vue 2webpack实现的,其模块化方式使用的是CommonJS。这意味着,当项目打包部署在服务器并进行访问时,需要将源码全部加载完成后才能进行渲染,即同步加载。随着项目持续迭代,内容增多,性能问题逐渐显现。

alt

3. 解决方案

考虑到向服务器发起了200多个请求,但查看那些.js文件,整个js文件夹大小才10.3MB,是否可以将10.3MB分为10.js文件,减少请求至10次呢?

3.1 方案一:替换成showDoc

使用showDoc在线文档系统,相比vuepress基于vue.js的静态站点生成器,除了操作便利,对于解决并发请求200次这个问题,还是有帮助的,毕竟showDoc初始化的时候,是从服务器获取文档目录,再通过文档ID,去请求文档详情,通常来说,不会有那么多文档目录,不太可能出现并发请求200次这个问题,只是将vuepress迁移至showDoc,花费的成本很高,文档格式需要调整,图片需要上传,想想这个工作量就头大,再者,作为平台的帮助文档,本身带有宣传的作用,很难醒目地在showDoc中体现平台的公司名和Logo,所以这个方案不推荐。

3.2 方案二:研究webpack如何合并打包

如果请求过多是因为文件太分散导致的,那么,能够在当前基础上,也就是webpack里,找到,当打包时,将各个文件合并,减少请求次数呢?

VuePress 1.0 支持通过 webpack-chain 链式操作来修改内部的 webpack 配置,如下所示:

module.exports = {
  chainWebpack (config, isServer) {
    // config 是一个 ChainableConfig 的实例
  }
}

那在 webpack 中,如何对打包的体积、文件等进行处理呢?在 webpack 官方文档中,有推荐使用 SplitChunksPlugin 插件,是为了代码分割,减少包的体积,然后优化加载效率,感觉和自己的初衷背道而驰,最终没达到自己想要的效果。还有就是研究了下 ModuleConcatenationPlugin 插件,其作用是将所有模块的作用域“提升”或合并到一个闭包中,从而使得代码在浏览器中执行速度更快。但是因为要在使用 webpack-chain 去调研 webpack 的配置,尝试使用后也没达到预期,加上再花精力投入到 VuePress 1.0webpack-chain 感觉有点不值。所以,就再想想其他方案。

3.3 方案三:替换成VitePress【推荐】

说到减少并发请求次数,实际上,Vite就在做这样的工作。Vite采用的JavaScript模块化方式是ESM(ECMAScript Modules)。与CommonJS相比,ESM支持按需加载,并且是异步执行的,不会阻塞浏览器的其他事件处理。这意味着在首次加载时,我们无需加载所有资源,仅需加载首页所需的资源即可。这样就能减少了并发请求次数,解决当前遇到的问题。

VitePress,正是基于Vue 3Vite构建的。

alt

5. 方案验证

以下是两个文档框架的对比,内容基本为空,可忽略不计。可以看到VuePress 1.0初始化请求的就有26个请求,大部分都是.js文件,而VitePress 1.0只有9个请求,.js文件的请求才4个。

5.1 VuePress 1.0

alt

5.2 VitePress 1.0

alt

6. 结论

由于VitePress也是VuePress团队开发的,并且是他们重点推荐的文档框架,从VuePress迁移至VitePress不需要推倒重来,只需调整差异部分,迁移成本相对较低,因此建议迁移至VitePress

本文由 mdnice 多平台发布

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Paimon x StarRocks 助力喜马拉雅构建实时湖仓

作者:王琛 喜马拉雅数仓专家 小编导读: 本文将介绍喜马拉雅直播的业务现状及数据仓库架构的迭代升级,重点分享基于 Flink Paimon StarRocks 实现实时湖仓的架构及其成效。我们通过分钟级别的收入监控、实时榜单生成、流量监测和盈亏预警&am…

Virtuoso使用layout绘制版图、使用Calibre验证DRC和LVS

1 绘制版图 1.1 进入Layout XL 绘制好Schmatic后,在原理图界面点击Launch,点击Layout XL进入版图绘制界面。 1.2 导入元件 1、在Layout XL界面左下角找到Generate All from Source。 2、在Generate Layout界面,选中“Instance”&#…

vscode插件-08 Golang

文章目录 Go安装其他必须软件 Go Go语言环境,只需安装这一个插件。然后通过vscode命令下载安装其他go环境需要的内容。 程序调试,需要创建.vscode文件夹并编写launch.json文件。 安装其他必须软件 ctrlshiftp,调出命令面板,输入…

Linux系列-vim的使用

🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” vim的使用 vim是多模式编辑器,不同的是vim是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面,比如语法加亮&am…

强化学习DQN实践(gymnasium+pytorch)

Pytorch官方教程中有强化学习教程,但是很多中文翻译都太老了,里面的代码也不能跑了 这篇blog按照官方最新教程实现,并加入了一些个人理解 工具 gymnasium:由gym升级而来,官方定义:An API standard for rei…

2024快手面试算法题-生气传染

问题描述 思路分析 生气只会向后传播,最后一个生气的人一定是最长连续没有生气的人中的最后一个人,前提是前面得有一个人生气。 注意,一次只能传播一个人,比如示例1,第一次只会传播给第一个P,不会传播给第…

入门 | Kafka数据使用vector消费到Loki中使用grafana展示

一、Loki的基本介绍 1、基本介绍 Loki 是由 Grafana Labs 开发的一款水平可扩展、高性价比的日志聚合系统。它的设计初衷是为了有效地处理和存储大量的日志数据,与 Grafana 生态系统紧密集成,方便用户在 Grafana 中对日志进行查询和可视化操作。 从架构…

分类算法——逻辑回归 详解

逻辑回归(Logistic Regression)是一种广泛使用的分类算法,特别适用于二分类问题。尽管名字中有“回归”二字,逻辑回归实际上是一种分类方法。下面将从底层原理、数学模型、优化方法以及源代码层面详细解析逻辑回归。 1. 基本原理 …

【Spring MVC】DispatcherServlet 请求处理流程

一、 请求处理 Spring MVC 是 Spring 框架的一部分,用于构建 Web 应用程序。它遵循 MVC(Model-View-Controller)设计模式,将应用程序分为模型(Model)、**视图(View)和控制器&#x…

现代数字信号处理I--最佳线性无偏估计 BLUE 学习笔记

目录 1. 最佳线性无偏估计的由来 2. 简单线性模型下一维参数的BLUE 3. 一般线性模型下一维参数的BLUE 4. 一般线性模型下多维参数的BLUE 4.1 以一维情况说明Rao论文中的结论 4.2 矢量参数是MVUE的本质是矢量参数中的每个一维参数都是MVUE 4.3 一般线性模型多维参数BLUE的…

QT(绘图)

目录 QPainter QPainter 的一些关键步骤和使用方法: QPainter 的一些常用接口: 1. 基础绘制接口 2. 颜色和画刷设置 3. 图像绘制 4. 文本绘制 5. 变换操作 6. 渲染设置 7. 状态保存与恢复 8. 其它绘制方法 示例代码1: 示例代码…

【js逆向学习】某多多anti_content逆向(补环境)

文章目录 声明逆向目标逆向分析逆向过程总结 声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的…

【安全解决方案】深入解析:如何通过CDN获取用户真实IP地址

一、业务场景 某大型互联网以及电商公司为了防止客户端获取到真实的ip地址,以及达到保护后端业务服务器不被网站攻击,同时又可以让公安要求留存网站日志和排查违法行为,以及打击犯罪的时候,获取不到真实的ip地址,发现…

Java | Leetcode Java题解之第524题通过删除字母匹配到字典里最长单词

题目&#xff1a; 题解&#xff1a; class Solution {public String findLongestWord(String s, List<String> dictionary) {int m s.length();int[][] f new int[m 1][26];Arrays.fill(f[m], m);for (int i m - 1; i > 0; --i) {for (int j 0; j < 26; j) {…

python爬虫抓取豆瓣数据教程

环境准备 在开始之前&#xff0c;你需要确保你的Python环境已经安装了以下库&#xff1a; requests&#xff1a;用于发送HTTP请求。BeautifulSoup&#xff1a;用于解析HTML文档。 如果你还没有安装这些库&#xff0c;可以通过以下命令安装&#xff1a; pip install requests…

Python实现深度学习模型预测控制(tensorflow)DL-MPC(Deep Learning Model Predictive Control

链接&#xff1a;深度学习模型预测控制 &#xff08;如果认为有用&#xff0c;动动小手为我点亮github小星星哦&#xff09;&#xff0c;持续更新中…… 链接&#xff1a;WangXiaoMingo/TensorDL-MPC&#xff1a;DL-MPC&#xff08;深度学习模型预测控制&#xff09;是基于 P…

简单的ELK部署学习

简单的ELK部署学习 1. 需求 我们公司现在使用的是ELK日志跟踪&#xff0c;在出现问题的时候&#xff0c;我们可以快速定为到问题&#xff0c;并且可以对日志进行分类检索&#xff0c;比如对服务名称&#xff0c;ip , 级别等信息进行分类检索。此文章为本人学习了解我们公司的…

神经网络进行波士顿房价预测

前言 前一阵学校有五一数模节校赛&#xff0c;和朋友一起参加做B题&#xff0c;波士顿房价预测&#xff0c;算是第一次自己动手实现一个简单的小网络吧&#xff0c;虽然很简单&#xff0c;但还是想记录一下。 题目介绍 波士顿住房数据由哈里森和鲁宾菲尔德于1978年Harrison …

Spark的集群环境部署

一、Standalone集群 1.1、架构 架构&#xff1a;普通分布式主从架构 主&#xff1a;Master&#xff1a;管理节点&#xff1a;管理从节点、接客、资源管理和任务 调度&#xff0c;等同于YARN中的ResourceManager 从&#xff1a;Worker&#xff1a;计算节点&#xff1a;负责利…

[java][基础]JSP

目标&#xff1a; 理解 JSP 及 JSP 原理 能在 JSP中使用 EL表达式 和 JSTL标签 理解 MVC模式 和 三层架构 能完成品牌数据的增删改查功能 1&#xff0c;JSP 概述 JSP&#xff08;全称&#xff1a;Java Server Pages&#xff09;&#xff1a;Java 服务端页面。是一种动态的…