缩窄route范围来提速本地打包的尝试

目录

  • 为什么要缩窄route范围
  • 缩窄route的方式
  • 意外触发的重复构建
  • 重复构建的原因
  • 解决方案

为什么要缩窄route范围

对于一些大单页,单个router-view中可能包含上百个页面。但是开发的时候其实并不需要那么多调试那么多页面。
因此,为了节省不必要的打包和热更新时间,可以对route进行缩窄

缩窄route的方式

笔者这里以webpack-plugin的方式去做构建时的route文件变更,plugin逻辑大致如下:

// 在 environment 阶段去做文件覆写
class LimitRoutePlugin {apply(compiler) {const absoluteFilePath ='/Users/xxxxxx/route.ts';compiler.hooks.environment.tap('ModifyFilePlugin', () => {try {const data = fs.readFileSync(absoluteFilePath, 'utf-8');this.originalContent = data;const modifiedContent = modifyContent(data);fs.writeFileSync(absoluteFilePath, modifiedContent, 'utf-8');} catch (err) {console.error('Error modifying file before compilation:', err);}});}

意外触发的重复构建

在这里插入图片描述
按预期,笔者使用了同步语句做文件覆盖,webpack的watch不可能会监听到多余的文件变更行为。但是事实就是,用了LimitRoutePlugin之后,触发了重新构建。

好吧,只能调试webpack的watcher逻辑,看下内部到底干了什么,竟能监听到生命周期之前的文件变更行为

重复构建的原因

在这里插入图片描述
在这里插入图片描述

位于watchpack/lib/DirectoryWatcher.js 96行位置,webpack做了文件变更的初始化。注意此处有一个FS_ACCURACY,其值为1000。而在fileChange的判断中,FS_ACCURACY会参与计算,这个buffer变量也就导致了webpack能监听到生命周期之前的文件变更行为。

可能有些难懂,画个时间轴就简单了:

我们假设plugin生效的时间点为x,webpack监听到文件改动的事件点为y。
更具fileChange的判断逻辑,只要x与y的差值小于1000,webpack就能监听到先前的文件变更,触发额外的重新构建。

解决方案

…有空再写

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

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

相关文章

CAPL通过addTimeToMeasurementStartTime或者getLocalTime获取本地时间

文章目录 getLocalTimeaddTimeToMeasurementStartTimegetLocalTime long tm[9]; getLocalTime(tm); // now tm contains the following entries: // tm[0] = 3; (seconds) // tm[1] = 51; (minutes) // tm[2] = 16; (hours)

计算机网络:网络层 - IP数据报的转发

计算机网络:网络层 - IP数据报的转发 基于终点转发最长前缀匹配二叉线索树路由表特殊路由特定主机路由默认路由 IP多播 基于终点转发 路由器转发报文时,是通过报文中的目的地址字段来转发的,也即是说路由器只知道终点的IP地址,根…

民生银行信用卡中心金融科技24届春招面经

本文介绍2024届春招中,中国民生银行下属信用卡中心的金融科技(系统研发方向) 岗位2场面试的基本情况、提问问题等。 2024年04月投递了中国民生银行下属信用卡中心的金融科技(系统研发方向) 岗位,暂时不清楚…

移动端消息中心,你未必会设计,发一些示例出来看看。

APP消息中心是一个用于管理和展示用户收到的各种消息和通知的功能模块。它在APP中的作用是提供一个集中管理和查看消息的界面,让用户能够方便地查看和处理各种消息。 以下是设计APP消息中心的一些建议: 1. 消息分类: 将消息按照不同的类型进…

关闭kylin(麒麟)系统的安全认证(烦人的安全认证)

打开grub sudo vim /etc/default/grup修改安全认证选项 增加12行,把13行注释掉 保存更改, 然后执行下面的命令: sudo sync sudo reboot重启成功后,就关闭了安全认证了~~~~~。 总体来讲,kylin还是基于ubuntu的内核的,…

【人工智能】开发AI可能获刑?加州1047草案详解

引言 随着人工智能(AI)技术的飞速发展,其应用领域不断扩展,但同时也引发了诸多争议和监管问题。近期,加州参议院以32比1的压倒性投票通过了1047号草案,又称《前沿人工智能模型安全可靠创新法案》。这一草案…

如何用Dokan在WooCommerce上创建多用户商城系统和多供应商市场

由于客户行为的变化以及技术的进步,在线业务如今变得越来越受欢迎。顾客现在可以在家中购物,因为这将节省大量时间并扩大他们的选择。这有助于促进所有在线商店场景的发展,包括多供应商市场。 如果您正在寻求如何在WooCommerce商城上创建多供…

Apple Intelligence 横空出世!它的独家秘诀在哪里?

在 WWDC 2024 大会上,苹果公司揭晓了自家的生成式 AI 项目——Apple Intelligence,其策略核心在于采用 ⌈ 更为聚焦的小型模型 ⌋ ,而非盲目追求大模型的普遍趋势。横空出世的它究竟有什么过人之处?一文带你探究竟!生成…

【html】学会这一套布局,让你的网页更加

很多小伙伴们在刚刚开始学习网页设计的时候不知道怎么布局今天给大家介绍一种非常实用且更加专业的一种布局。 灵感来源: 小米官网 布局图; 实例效果图: 这是一个简单的HTML模板,包括头部、内容区域和底部。 头部部分包括一个分为左右两部分…

【Spine学习08】之短飘,人物头发动效制作思路

上一节说完了跑步的, 这节说头发发型。 基础过程总结: 1.创建骨骼(头发需要在上方加一个总骨骼) 2.创建网格(并绑定黄线) 3.绑定权重(发根位置的顶点赋予更多总骨骼的权重) 4.切换到…

计算机游戏因为d3dcompiler_47.dll丢失无法启动怎么办?解决只要d3dcompiler_47.dll丢失无法启动游戏软件的方法

d3dcompiler_47.dll 是一个动态链接库文件,属于 Microsoft DirectX 的一部分,主要负责编译和运行 3D 图形程序。它是支持 Direct3D 功能的核心组件,Direct3D 是一种用于编程 3D 图形的 API,广泛应用于游戏和图形密集型应用程序中。…

表格状态码转换,其他索引串转成名字

1.问题分析 原数据库 关联指标为数字串的形式,每个小数对应的是另一张表index的属性,我们想知道对应指标的名称,怎么在这里下面这种形式呢? 两种思路: 1.修改在后端处理,把后端关联指标部分修改成图二的…

如何训练自己的大型语言模型?

简介 大型语言模型,如OpenAI的GPT-4或Google的PaLM,已经席卷了人工智能领域。然而,大多数公司目前没有能力训练这些模型,并且完全依赖于只有少数几家大型科技公司提供技术支持。 在Replit,我们投入了大量资源来建立从…

【TB作品】STM32F102C8T6单片机,PWM发生器

硬件: STM32F102C8T6核心板,按键,0.96 OLED显示屏。 软件: 1、硬件启动触发单片机输出PWM,未触发之前PWM输出为低电平。 2、按键修改PWM的变化模式、变化时间长度、占空比上下限。 3、输出的PWM是固定的10kHZ的。 4、变…

6个免费自动写文章软件,简直好用到爆

对于创作者而言,创作一篇高质量的文章并非易事,它需要耗费大量的时间与精力去构思、组织语言、斟酌字句。灵感并非总是源源不断,有时我们可能会陷入思维的僵局,不知从何下手。而此时,免费自动写文章软件就如同黑暗中的…

46-1 护网溯源 - 钓鱼邮件溯源

一、客户提供钓鱼邮件样本 二、行为分析 三、样本分析 对钓鱼邮件中的木马程序1111.exe文件进行了分析,提交了360安全大脑沙箱云和微步在线云沙箱。 360安全大脑沙箱云显示,该1111.exe文件存在危险 建议使用360压缩软件进行解压,同时注意系统安全,避免不必要的风险。 四…

使用libpurple函数库接入服务器

代码; #define CUSTOM_USER_DIRECTORY "/dev/null" // 定义用户目录 #define CUSTOM_PLUGIN_PATH "" // 定义插件目录 #define PLUGIN_SAVE_PREF "/purple/nullclient/plugins/saved" // 定义插件头目录 #define UI_ID "nullc…

秋招突击——第四弹——Java的SSN框架快速入门——Maven

文章目录 引言Maven分模块开发与设计分模块开发的过程 依赖管理可选依赖与排除依赖 继承与聚合聚合继承 属性和版本管理属性扩大集中管理的范围版本管理 多环境开发多环境开发 私服简介安装私服资源操作流程分析上传和下载 总结 引言 前一个部分花了太多时间,后续得…

IBM,开始构建以量子为中心的超级计算机

6月6日,IBM与Pasqal宣布了一项重大合作!IBM和Pasqal打算合作开发一种以量子为中心的超级计算的通用方法并促进化学和材料科学的应用研究。IBM和Pasqal将与高性能计算领域的领先机构合作,为以量子为中心的超级计算奠定基础——将量子计算与先进的经典计算…

理解Python的元类

1.type()函数 type 函数是一个内置函数,用来获取一个对象的类型。它可以接受一个参数,返回这个参数的数据类型。type也可以用来创建类,type就是元类 x333 list["ab"] tuple (1, "a", True, 3.14) dict {name: Alice,…