Perback的博客

webpack由浅入深]系列的内容webpack cache 发布3年多了, 在历史包袱中的项目中其实非常好用.本文会介绍 cache 在一个项目中的实践经验, 和实现流程, 以及了解流程后的一些推论.

在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。看上图，用文件的摘要信息来对资源文件进行重命名，把摘要信息放到资源文件发布路径中，这样，内容有修改的资源就变成了一个新的文件发布到线上，不会覆盖已有的资源文件。全套做下来，就是相对比较完整的静态资源缓存控制方案了，而且，还要注意的是，静态资源的缓存控制要求在。

H5 技术已经成熟H5 开发成本低H5 投放成本低数量膨胀，定制化要求苛刻SSR 比例增加，CSR 占据主流Monorepo 比例增加，类 Shadcn UI 组件库也许会兴起总而言之，H5 开发会越来越专业，对程序员要求会越来越高。至于这种情况是好是坏，仁者见仁智者见智，欢迎大家在评论区沟通交流。

这两天突然想看看文心一言的http通信请求接口，于是想着用F12看看。谁知道刚打开开发者工具，居然被动debugger了。直接被JS写死的debugger关键字下了断点。行吧，不让调试就不让调试吧，关闭开发者工具之后，直接跳到了空白页。其实几年之前就碰到过类似的情况，不过当时才学疏浅，也没当回事，就没研究过。这次又碰到了，毕竟已经不是当年的我了，于是便来研究研究。

可以确定的是，从服务端返回的数据到在表格中的渲染过程是没有问题的。那么，可能出现问题的地方还有两个：一是在选择数据后，数据被传递到父组件的过程中；这种情况通常发生在你从某个源（比如一个API或者外部数据文件）接收到一个数值类型的大数值，如果数据源头不能修改，只能使用第三方库lossless-json、json-bigint来解决。如果用数值类型表示一个大数值，而且你不能直接修改源代码或源数据，这种情况比较棘手，因为一旦 JavaScript 解析器处理这个数值，它可能已经失去了精度。

最近弄了一个新的 Vue3 项目，页面不多，其中有三四个页面需要共享状态，我几乎条件反射般地安装了Pinia来做状态管理。后来一想，我只需要一个仓库，存放几个状态而已，有必要单独接一套 Pinia 吗？其实不需要，我差点忘记了 Vue3 的一个重要特性，那就是组合式函数。组合式 API 大家都知道，组合式函数可能大家没有特别留意。但是它功能强大，足矣实现全局状态管理。

JavaScript 的沙箱环境是一种隔离执行环境，允许运行和测试代码而不干扰主应用程序的状态或数据。它通过限制代码访问全局变量和函数，提供了一个安全的方式来执行不信任的代码，避免潜在的安全风险和数据泄露。沙箱环境对于保护应用程序免受恶意代码或不确定性代码影响至关重要。

核心思想是一个萝卜一个坑，直到所有的萝卜都从坑里出来。(误)通过维护一个任务池，标记当前请求，下一个请求，以及当前总共请求的次数，便可以做到前端控制并发的需求场景。

金三银四跳槽季，offer快到碗里来，前端面试考点众多，而网上各个前端知识点的博客文章又太多，看的眼花缭乱……所以便整理了一下常见知识点的资料，基本上覆盖了前端知识点被面试到的所有内容，面试题、八股文都是自己之前遇到过或者根据同行、粉丝面试过程中遇到的，也在一直更新！！！确定是精华干货。也是经过多位粉丝和阿里P8大佬认可的，在这个竞争激烈的月份给大家增加点底气！各位，卷起来吧！！！希望大家共同学习进步！！由于文章幅篇的限制小编就用截图的方式给大家展示需要获取完整版的小伙伴关注我后，点击即可领取。

看到这里，希望你已经对Diff 算法有了初步的了解，想要深入了解，可以自行查看Diff 源码。总的来说，Diff 算法是一项关键的技术，为构建响应式和高效的用户界面提供了基础。最后，祝你面试顺利，学习进步！如果你正在面临春招，或者对面试有所疑惑，欢迎评论 / 私信，我们报团取暖！

而变量的句柄必须通过 var、let、const、function 这些关键字声明才可以由 js 引擎生成，而值（或者说数据）可以通过变量运算或者字面量直接生成。

Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库，它使用 Bodymovin 解析导出为 JSON 的 Adobe After Effects 动画，并在移动设备和 Web 上原生渲染它们！这是第一次，设计师可以创建和发布精美的动画，而无需工程师精心手工重新创建它们。他们说一图胜千言，请看示例：上述动画是在 After Effects 中创建的，可以使用简单的 JSON 文件在所有平台上进行本机渲染。

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。

我最近修复了一个倒计时延迟的bug，情况是用户10:00设置了10分钟倒计时，10:06查看时发现倒计时还有8分钟，倒计时出不准确、延迟的情况。通过排查是导致的。为什么浏览器优化策略会造成定时器不准时？又该怎么解决这个问题？本文会围绕这两个问题展开说明！

上面啰啰嗦嗦说了一大堆，其实总结起来就是<script setup lang="tsx"> 开启tsx 混编；直接在 创建vnode 或者render 函数；借用<component :is="render()" />插入到模板中；这是我们常用的混合使用setup template 和tsx 的方式，既能实现 vnode 的复用，又可以完美地和 css scoped结合，推荐大家在一些需要灵活的场景下使用这种模。

Vue Naive Admin 2.0 是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia + Unocss，后端使用 Nestjs + TypeOrm + MySql + Redis，简单易用，赏心悦目，历经十几次重构和细节打磨，诚意满满！！

上周 Next.js 14 发布了，该版本相较于 13，没有任何 API 变更，主要更新点是 Turbopack 带来了大幅的性能提升以及 Server Actions 功能进入稳定版本。Next.js 14 带来了三个主要新功能然而并不是所有的测试都通过了，当前只通过了 90% 的测试，所以 Turbopack 还不稳定。其中第二点在 Twitter 中引起了巨大讨论，也就是下面这张图，大家都在拿这张图开玩笑，甚至出现了 "use electronics"。

告诉大家一个好消息，OxLint 现在正式发布了！可能有些同学不了解，简单介绍一下，它和 ESLint 一样，是一个 JavaScript 代码检查工具，只是它不需要任何复杂的配置，就能帮助我们捕捉错误或无用代码。它使用 Rust 编写，速度非常地快，和 ESLint 对比起来，大概快 50 ~ 100 倍。尤大也惊叹它的速度之快：放个图给大家感受一下：更详细的性能对比请前往 bench-javascript-linter。

我们通过 Nest.js 自定义参数装饰器createParamDecorator，从请求中获取经过身份验证的用户信息。如果我们传入id，可以在auth.middleware权限中间件中在挂载req.user中获取信息。然后根据请求头加密信息将通过jwt的解密方法获取最终解码的用户信息。本文介绍了如何在 Nest.js 中集成 Swagger，并使用 TypeORM 进行数据库操作。通过使用 Swagger，我们可以自动生成 API 文档，方便开发人员查看和测试 API。

vite2还没焐热，vite5又来了！！！就在一周前vite5重磅发布了！性能大幅提升!请看下面：下面是翻译过来的，原文：Vite 5.0 发布！|维特 (vitejs.dev)Vite 4 大约在一年前发布，它为生态系统奠定了坚实的基础。每周的 npm 下载量从 2 万跃升至 5 万，因为项目不断建立在共享的基础设施上。框架不断创新，除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等之外，我们还看到了新框架的加入，使生态系统更加强大。