XIY Blog

Thinking will not overcome fear but action will.

ts类型体操实战

ts类型体操实战

前言 在 TypeScript 的学习与实践中,理解和掌握各种类型工具及自定义类型操作是提升代码质量与开发效率的关键。本文将深入探讨 Partial、Readonly 等常见工具类型的实现原理,并结合 lodash 的 get 方法进行类型体操实践,以加深对 TypeScript 类型系统的理解。 ts 相关 api TypeScript 提供了一系列强大的内置工具类型,这些类型在处理对象...

吃透react hooks

前端性能优化

(更新中) 常见的自定义 hooks useLastest 永远返回最新的数据 更改 state 也可以获取到最新的数据 import { useRef } from "react"; const useLatest = <T>(value: T): { readonly current: T } => { const ref = useRef(value); ...

Depspy项目代码依赖功能核心讲解

Depspy项目代码依赖功能核心讲解

项目代码依赖实现功能 实现导出函数级影响面分析 假设我们在a.js有两个导出函数a1 a2,a1被b.js引用,a2被c.js引用,当更改a1时,影响的文件只会是b.js,而不会影响c.js,这就是函数级影响面分析。 插件参数 entry 指定入口,会从入口处开始分析,默认是index.html ignores 忽略某些文件,文件路径为 entry + ignore 路径 ign...

关于前端智能化的一些感悟

前端智能化

前端智能化是什么? 前端智能化,顾名思义,就是将人工智能技术应用于前端开发中,通过机器学习、自然语言处理等技术,实现前端开发自动化、智能化。前端智能化可以帮助开发者提高开发效率,降低开发成本,同时也可以为用户提供更加智能化的用户体验。 前端智能化的应用与挑战 目前看到比较成熟的一些方面,一个是代码智能补全,一个是加入D2C里面。 代码智能补全已经非常成熟了,目前主流的IDE都支持代码...

输入url到显示页面有多少地方可优化

前端性能优化

从输入 url 到展示前端页面开始聊起 明明已经被问烂了但面试官还是喜欢问的面试题,它究竟有什么魔力让面试官一直问? 面试官真的想知道从输入 url 到展示前端页面的整个流程吗? 其实可能更关注的是其中一些值得优化的点!!! 那么从整个流程看起,里面究竟有多少可以做性能优化的部分吧! 输入url后:DNS解析如何优化? 在我们输入url到渲染页面的过程中,其实有两类DNS解析。 ...

关于我抛弃vscode换上cursor的事

cursor

前言 VSCode 作为一个老牌的前端开发者的工具,受到了广大使用者的好评!自从入行以来,就一直在使用 VSCode,可以说是忠实用户了。 平常也有用代码提示和补全功能,但一直觉得不够智能,尤其是对于一些复杂的代码,提示不够准确,有时候还需要自己手动去补全。 但偶然间,了解到了 cursor 编译器,他是一个基于 vscode 开发的编辑器,加强了代码补全、代码提示等功能。 比之前用...

react fiber原理篇

react fiber原理篇

(更新中) 为什么会有 fiber 架构? 原架构采用递归遍历方式来更新 DOM 树,一旦开始,即占用主线程,无法中断(微任务也能中断?微任务无法真正中断递归过程,只能在同步任务结束后执行,无法满足 React 对任务优先级和中断恢复的需求),这在页面上会引起问题,如 input 输入后页面卡顿等 。 filer 使用链表结构,将递归遍历更改为循环遍历,实现任务拆分、中断和恢复,从而解决...

webpack 配置详解

webpack 配置详解

为什么需要打包工具 开发时,我们会使用框架(React, Vue), ES6 模块化语法, Less/Sass 预处理器等语法进行开发,这样代码想要在浏览器运行时必须经过编译成浏览器能识别的JS, CSS, HTML等,才能运行。 所以我们需要打包工具帮助我们完成这些事 除此,打包工具还能进行压缩代码,做兼容性处理,提升代码性能等 基本使用 它会以一个或多个文件作为打包的...