---
url: https://sugarat.top/weekly/2023-11-26.md
description: >-
  ① 前端量子纠缠效果 ② Rsbuild 登场 ③ Easydict - 词典翻译 macOS App ④ 一文带你了解前端渲染模式演进史 ⑤
  截图生成网页源码
---

# 视野修炼第63期

*笔者在GitHub开了个 discussion [🔥 技术&开源&文章推荐](https://github.com/ATQQ/sugar-blog/discussions/123)，欢迎读者推荐贡献内容或者知识渠道*

欢迎来到第 63 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. 前端量子纠缠效果](https://mp.weixin.qq.com/s/VxNhRRe7ZBwFYbvUTSVaYQ)

本周最火的“前端项目”

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3MjA1NzMyMQ==700972057321)

下面是动图的效果

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3MjIyOTYzMA==700972229630)

作者开源了简版的实现 [multipleWindow3dScene](https://github.com/bgstaal/multipleWindow3dScene)，目前已经有6k+的⭐️

掘金上也有相关的实现：[跨窗口渲染动画效果](https://juejin.cn/post/7304537142122266674)

### [2. Rsbuild 登场](https://mp.weixin.qq.com/s/dorbW52HcJCaJaL9yybC3Q)

> Rsbuild 是基于 Rspack 的构建工具，旨在成为增强版的 Rspack CLI，更加容易上手和开箱即用。Rsbuild 是 Webpack 应用迁移到 Rspack 的最佳方案，他能帮助你减少 90% 配置并获得 10 倍构建速度。

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3MjczMjI2OA==700972732268)

下面是创建的一个 React Demo

```sh
npm create rsbuild@latest
```

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3MzExNTg5NQ==700973115895)

下面是一个 benchmark 数据

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3Mzg2NDY4Nw==700973864687)

下面是 Rsbuild 在生态中的定位
![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3NDEyMzg2NQ==700974123865)

*现在新项目又多了一个选项，xdm 可以用起来，当然笔者首选 Vite hh*

## 🔧开源工具&技术资讯

### [3. Easydict](https://github.com/tisfeng/Easydict) - 词典翻译 macOS App

开箱即用，支持离线 OCR 识别，支持有道词典，🍎 苹果系统词典，🍎 苹果系统翻译，ChatGPT，DeepL，Google

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3NzYwNjU4OA==700977606588)

下面是翻译结果

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk3NzcyMzE4OA==700977723188)

### [4. 一文带你了解前端渲染模式演进史](https://mp.weixin.qq.com/s/7SrtTbzSJwXbz-DPSLprHg)

作者详细的阐述了各种渲染模式的优缺点，读者在做相关技术选型时可参考，还能从文中获得在性能优化方面的一些灵感和思路。

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk4NDQwNjM4NQ==700984406385)

## 🤖AI工具&资讯

### [5. 截图生成网页源码](https://github.com/abi/screenshot-to-code)

使用截图，通过GPT 生成网页HTML/Tailwind/JS 的代码实现

下面是测试的结果，emmm 马马虎虎吧

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk4MzU3NDEzMw==700983574133)

*项目是开源的，拉下来配置api-key就能跑*

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTcwMDk4MDYwMDAwNA==700980600004)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技 内容，周五发布
* [云谦：MDH 前端周刊](https://mdhweekly.com/) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！