阅读 53

湖中剑 前端周刊 #2 | 2021-08-02

周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。

📰 News

Yarn 3.0 🚀🤖 性能提升, ESBuild

YarnFacebook在2016年推出的npm替代品,之后npmYarn一直在持续迭代,然而 Yarn 2的改动劝退了不少人。

这次Yarn 3会是一个平滑升级的版本,更多内容可以看 changelog

dev.to/arcanis/yar…

Node 16.6.0 (Current) 发布

这次Node发布里,V8引擎也升级到9.2版本。

其中引入了新的Array.prototype.at特性:

const array = [1, 2, 3];

console.log(array.at(-1));
// Prints: 3
复制代码

github.com/nodejs/node…

React Native迎来重大架构升级,性能将大幅提升

mp.weixin.qq.com/s/bIkShX_pD…

📖 文章

Chrome 扩展程序如何影响浏览器性能?

这是一份关于1000个热门Chorme扩展对浏览器性能和用户体验有什么影响的报告。

www.debugbear.com/blog/chrome…

Optimizing JavaScript Standard Library Functions in JSC

来自AppleJavaScriptCore团队成员分享的关于“如何优化JS标准库函数”的经验。

webkit.org/blog/11934/…

🌟 实现基于内容感知的图片缩放

这里用到了Seam Carving算法,最终效果可以做到图片被裁减时,关键位置仍可以被保留下来。

Seam Carving算法里还用到了动态规划,说明算法还是很重要的,手动狗头。

trekhleb.dev/blog/2021/c…

Web NFC

浏览器也开始支持了NFC(Chrome for Android 91)。

cxlabs.sap.com/2021/07/27/…

WebView2 and Electron

WebView2Electron.js的对比说明。

WebView2是基于Microsoft Edge实现的组件,用于把网页视图嵌入到app中。

www.electronjs.org/blog/webvie…

精读《React 18》

React 18 带来了几个非常实用的新特性,同时也没有额外的升级成本,值得仔细看一看。

zhuanlan.zhihu.com/p/388891604

是时候说再见了,Enzyme.js

www.infoq.cn/article/1b1…

🌟 浏览器的旅程 🛣️ - 浏览器是如何工作的?

文章系统性解答经典面试题 “从输入URL到页面加载发生了什么”,非常值得学习。

dev.to/gitpaulo/jo…

在 async setup 中使用 Vue Composition API 可能遇到的问题

文章详细介绍了 Vue Composition API 是如何在没有调用对象的情况下获取到当前组件实例的,同时也对在 async setup 中使用 VCA 存在的调用限制进行了分析并给出了解决方案。

antfu.me/posts/async…

对巨石应用说不:转转商业微前端qiankun历史项目迁移升级实践

mp.weixin.qq.com/s/jFjbPpWoW…

🌟 手写系列-实现一个铂金段位的 React

mp.weixin.qq.com/s/C4pjEzYPZ…

腾讯课堂小程序性能极致优化——网络请求优化篇

mp.weixin.qq.com/s/g2mLpWhGs…

关注点分离(Separation of concerns, SoC)在 React hooks中的使用

felixgerschau.com/react-hooks…

Chromium 内核 Layout 模块学习

mp.weixin.qq.com/s/UYzAWkCuI…

🌟 then(f, f) vs then(f).catch(f) 有什么区别

常见面试题,举个例子:

// 1
promise.then(success, error)
// 2
promise.then(success).catch(error)
复制代码

success返回rejected promise,只有后者能catch

dmitripavlutin.com/javascript-…

🌟 47 张图带你走进浏览器的世界!

mp.weixin.qq.com/s/pchlKetN9…

Netcat - All you need to know

blog.ikuamike.io/posts/2021/…

在Node中使用Worker Threads执行计算密集型任务

yarin.dev/nodejs-cpu-…

😺 开源

🛠 工具、软件

size-limit

size-limit是一个针对JavaScript性能衡量工具,通过计算打包大小来保持良好的性能,支持ES modulestree shaking

配合GitHub action,还能在有pull request时给出报告:

github.com/ai/size-lim…

COLOR THIEF

使用JavaScript从图片获取颜色集,支持浏览器和node

lokeshdhakar.com/projects/co…

react-tracking

基于React的声明式用户行为采集框架。

github.com/nytimes/rea…

sift.js

JavaScript使用Mongodb queries查询数据。

github.com/crcn/sift.j…

color

JavaScript颜色转换和操作库

github.com/Qix-/color

Abracadabra

Abracadabra是一款VS Code上的扩展,可以帮你快速重构jsts代码。

marketplace.visualstudio.com/items?itemN…

fnm

一个基于 RustNode.js 版本管理工具,可用于替换 Node Version Manager(nvm)。

github.com/Schniz/fnm

prestige

用作者的话来说,这是一个强大的、基于文本的、他想要的HTTP客户端应用程序。

使用方式非常有意思,只需要以HTTP报文的格式书写文档,并敲击Ctrl+Enter/Cmd+Enter即可查看其请求和响应信息。

github.com/sharat87/pr…

tauri

一个基于Rust的跨平台桌面应用开发框架,对标 Electron,但更小更快更安全。

github.com/tauri-apps/…

MMKV——移动端优先的高性能 KV 组件

www.notion.so/MMKV-KV-1c9…

🌟 node.new

用于快速验证框架或工具,网页里你可以直接使用npm安装依赖并启动项目。

node.new/

🌟 beachball

beachball是微软推出的版本发布工具。

microsoft.github.io/beachball/

技巧

史诗级更新,VSCODE 可无缝调试浏览器了!

Visual Studio Code的调试功能进一步增强,现在可以直接在VS Code里使用浏览器的DevTools里面的ElementsNetwork功能。

主要包含两点:

  1. 直接查看console.x调试信息,也支持$(body)操作
  2. 配合使用Edge浏览器,可以直接使用部分DevTools功能

mp.weixin.qq.com/s/qpaod-Gpk…

关注我们

每期首发于:github.com/ineo6/weekl…

文章分类
前端
文章标签