Nexo - ryne's blog

屎山 Electron 应用体积裁剪记录

文章详细介绍了一位开发者如何通过一系列优化手段，成功将其基于 Electron + Vite 开发的 AI 桌面编程助手的安装包大小从 180MB 缩减至 80MB，以及将 app.asar 文件从 416MB 减至 56MB。主要优化措施包括将仅用于渲染进程的依赖移至 devDependencies，利用 electron-builder 启用最大压缩选项，以及使用 afterPack 钩子删除不必要的文件。这些步骤帮助显著减少了应用的体积，同时保持了功能完整。作者还分享了一些经验教训，如逐步验证每一步优化效果和定期审计依赖的必要性。文章为那些遇到类似体积挑战的开发者提供了实用的指导和灵感。

2026-02-09

3049字

105

#electron

Vue Computed Watch

本文介绍了 Vue.js 中的两个核心功能：computed 和 watch。computed 用于创建响应式的计算属性，支持只读和可写两种模式。其核心实现通过封装 getter 函数，基于依赖追踪机制在响应式数据变化时动态计算最新值。watch 则用于监听响应式数据源的变动，并在变动时执行回调函数。支持的特性包括对单一或多个来源的监听、深度监听、立即执行选项以及在数据变化或监听停止时执行的清理函数。文章详细介绍了这两种功能的实现细节，并通过 TypeScript 和面向对象编程思维，构建了对这两者的扩展和优化。提供的代码例子涵盖了如何实现响应式数据的自动依赖追踪与更新，帮助开发者更好地控制 ...

Vue Ref

这篇文章探讨了 Vue 3 中的 ref 和 shallowRef 的工作原理及其用法。ref 是一种允许单个数据变得响应式的 API，通过 .value 属性实现对数据的追踪和修改监听，适用于简单数据类型和复杂对象。当对象被赋予 ref，借助 reactive() 实现深层次响应式，使得对对象属性的更改同样被追踪。若想避免深层绑定，可以使用 shallowRef，它限制响应式仅作用于 .value，对内部属性的变更不会触发响应。文章还介绍了 triggerRef 用于强制更新浅层引用的依赖，toRef 及 toRefs 用于将响应式数据对象的属性转变为可独立追踪的 ref，从而实现双向绑定。...

Implement promise

本文详细讲述了如何实现一个符合 Promise A+ 规范的 JavaScript Promise 类。从基础原理入手，文章逐步介绍了 Promise 的基本结构和功能，包括创建 Promise 实例和实现状态转换，以及解决异步调用问题。文章通过定义并实现一系列的逻辑步骤，解决了 Promise 的状态管理、结果存储、错误处理等问题。核心过程包括 resolve 和 reject 方法的绑定、异常捕获、以及 then 方法的链式调用支持。特别地，文章深入探讨了 Promise 的解决过程，并通过实现 resolvePromise 函数来保证 Promise 链的正确性和循环引用的处理。此外，文...

vue的双端对比和最长递增子序列

本文深入分析了 Vue 框架中的虚拟 DOM 更新机制，特别是组件创建和更新时的过程。主要通过对比新旧虚拟 DOM 的差异来更新真实 DOM，这个过程被称为 diff。Vue 使用一个 patch 函数实现了 diff，通过深度优先、逐层比较的方法，结合虚拟节点的 key 和 tag 来判断节点是否相同。在节点的比较过程中，为了最大限度地复用真实 DOM，Vue 使用双端对比策略，用两个指针分别指向子节点数组的头尾进行比对。针对节点移动的优化，文章探讨了 Vue 如何利用最长递增子序列找出需要最少移动的节点序列，有效减少了耗费资源的 DOM 操作。这一分析为开发者提供了深刻理解 Vue dif...

事件循环

文章详细解析了进程和线程的概念，尤其是在浏览器环境中的应用。进程代表程序运行所需的独立内存空间，而线程是CPU调度的最小单位，每个进程至少拥有一个线程。在浏览器中，浏览器启动后会生成多个进程，渲染进程包含渲染主线程，负责执行HTML、CSS、和JS代码，并形成任务队列进行事件循环。文章阐述了异步编程的重要性，以防止主线程阻塞，并解释了任务队列根据优先级进行调度的机制。微队列中的任务优先于其他任务执行，以确保效率。而针对JS的单线程处理与异步执行机制，文章指出JS在浏览器中采用异步处理方式，以避免锁死。此外，还回答了关于渲染进程线程使用、异步理解及事件循环的相关问题，明确了JS计时器的局限性及事...

浏览器缓存

这篇文章介绍了浏览器缓存的基本概念及其作用，重点在于如何利用浏览器缓存机制来提升网页访问速度、节省带宽并减轻服务器压力。文章详细讨论了强缓存和协商缓存两种主要的缓存类型，说明了它们各自的作用机制及实现方式。强缓存无需发送HTTP请求，而协商缓存则需根据请求头判断是否命中。文中指出，HTTP响应头中的Expires、Cache-Control、Last-Modified和ETag是缓存机制设定的重要字段。此外，文章还介绍了三级缓存的实现过程和LRU（最近最少使用）算法在缓存淘汰中的应用。通过这些内容，读者能了解到浏览器缓存在优化Web性能中的关键角色以及如何有效利用缓存策略来管理网络资源。

Vue Template

本文介绍了如何实现Vue的"template"编译功能，通过解析模板字符串并生成渲染函数，使得能够将模板形式的Vue组件代码转换为渲染函数的形式。文章首先展示了一个简单的实现，利用正则表达式对模板字符串进行基本解析，并生成渲染函数，随后指出该方法在处理复杂模板时存在局限性。为了解决复杂模板解析的问题，文章介绍了使用AST（抽象语法树）的解析方法。具体过程包括解析子节点、文本节点、元素节点以及其属性，并通过相关的代码示例对各个步骤进行了详细说明。最终，通过基于AST生成对应的渲染函数，实现了完整的模板编译功能。文章的核心价值在于详细阐述了从模板字符串到渲染函数的编译过程，涵盖了从简单实现...

Vue Reactivity System

这篇文章深入探讨了 Vue.js 的响应式系统及其如何通过 JavaScript 的 Proxy 和 Reflect 对象实现数据追踪与更新。文章首先解释了响应式对象在 Vue 中的工作原理，强调 Vue 使用 JavaScript 的 Proxy 为对象提供代理以拦截基本操作，这样可以检测到对对象属性的访问和修改，并实时更新视图。文章接着详细说明了 Proxy 和 Reflect 的机制，以及它们如何协同工作以替代传统对象操作中的一些局限。特别是使用 Reflect，可以更方便地处理无法通过直接操作获取的信息。文章还深入讲解了 Vue 响应式系统中的关键概念，包括 targetMap、Rea...

DI and DIP 依赖注入和依赖注入原则

文章详细解读了依赖注入（DI）和依赖倒置原则（DIP）在软件设计中的应用。DI的核心思想是将依赖通过外部传入而不是在类内部创建，这样可以减少耦合并提高测试性和灵活性。通过实际例子展示了在不使用和使用依赖注入情况下的代码差异，强调了使用DI后类的可替换性和测试性增强。文章还深入阐述了DIP，即高层模块不应该依赖低层模块，二者都应依赖抽象接口。这种设计使高层模块与具体实现无关，从而提高系统的扩展性和可维护性。具体实例解释了在创建一个UI渲染引擎时，如何通过DI和DIP实现逻辑与具体实现分离，增强系统的解耦性和灵活组合能力。总结来说，这种设计模式能够构建出高度可扩展和可复用的架构，适用于多种运行...

nest集成cache-module实践

这篇文章详细介绍了如何在NestJS应用中集成Redis缓存，以提高接口的性能和效率。文章首先列出了所需的依赖项，然后通过代码示例展示了在app.module.ts中配置Redis缓存的方法。接下来，文章提供了实现自定义缓存拦截器CustomCacheInterceptor的步骤，该拦截器允许仅缓存GET请求并根据自定义元数据跳过缓存操作。此外，文章还展示了通过自定义装饰器@CustomCache灵活地控制哪些接口需要缓存。为便于缓存管理，文章介绍了一个缓存服务HelperCacheService，该服务支持获取、清除以及按前缀管理缓存内容，以确保在数据更新时能自动删除相关缓存。最后，文章...

Jenkins自动部署

本文详细介绍了如何在CentOS 7.6服务器上通过Docker和Jenkins实现自动化部署。从Docker的安装开始，文章逐步讲解了国内镜像仓库的配置、docker-ce的安装与启动，以及镜像加速源的设定。随后，文章详细描述了如何安装Jenkins，包括依赖的软件包如Git和JDK的安装与配置、通过Docker拉取Jenkins镜像、启动并配置Jenkins等步骤。针对Jenkins的使用，文章还提供了如何更换插件源、配置前端项目、创建Jenkins项目以及与GitHub集成的详细操作步骤。文章的核心在于通过自动化工具优化和简化服务器环境搭建和项目部署的流程，对开发运维人员具有很高的实用价...

使用 Docker 部署 NestJs

本地测试本文提供了如何在本地环境中测试一个基于 Node.js 的项目的详细指南。通过 Dockerfile 构建镜像，设置数据库（MySQL）和缓存系统（Redis）。文章还介绍了如何配置 Docker Compose 并使用 GitHub Actions 部署代码到服务器。目录展示了 Dockerfile 用于构建镜像的配置，deploy.sh 脚本用于应用程序的数据库迁移和启动服务。然后通过修改阿里云镜像加速 Docker 镜像下载。接下来，提供了 Docker Compose 文件配置并展示如何在服务运行后检查系统状态。为了服务器部署，文章进行了 Docker 安装和 Gi...