「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」
前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等，周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布，订阅平台如下，欢迎订阅。
- 订阅网站: weekly.shanyue.tech
- 订阅 Github: shfshanyue/weekly
开发利器
一、 Rclone: 支持多个云存储的，高性能的文件同步工具
Rclone，rsync for cloud storage，是使用 Go 语言编写的一款高性能云文件同步的命令行工具，可理解为云存储版本的 rsync。
- 支持多个云存储，如阿里云、腾讯与、青云、AWS 等
- 支持按需复制，每次仅仅复制更改的文件
- 可断点续传
- 可压缩传输
# 安装 Rclone
$ curl https://rclone.org/install.sh | bash
# 配置 Rclone 的云存储器交互式配置，如配置阿里云的 key/secret
$ rclone config
# 配置结束之后在本机生成配置文件，可查看目录 ~/.config
$ cat ~/.config/rclone/rclone.conf
[alioss]
type = s3
provider = Alibaba
env_auth = true
access_key_id = *********************
secret_access_key = *********************
endpoint = oss-cn-beijing.aliyuncs.com
acl = public-read
storage_class = STANDARD
# 列出所有的 bucket
$ rclone lsd alioss:/
-1 2018-11-14 21:34:17 -1 shanyue
-1 2019-11-23 13:54:28 -1 shanyue-blog
-1 2020-01-27 15:06:08 -1 shanyue-ncov
-1 2019-12-02 17:48:42 -1 shanyue-question
# 复制文件，以 vuepress 为示例
$ rclone copy .vuepress/dist alioss:/shanyue-blog --progress
Transferred: 0 B / 0 B, -, 0 B/s, ETA -
Checks: 1099 / 1099, 100%
Elapsed time: 3.8s
# 对比远程文件与现在文件的区别
$ rclone copy .vuepress/dist alioss:/shanyue-blog --progress
现在前端静态资源大多扔在对象存储之上，如阿里云的 OSS，腾讯云的 COS 等，使用 Rclone 大大降低传输时间，并大大缩短前端的部署时间。
二、 Image Tool 纯网页端的图像压缩工具
颜值高、功能强大，使用 WASM 的纯网页端的图像压缩工具
三、 sshshape: 简单几个点画出漂亮图形
通过几个点就可以画出漂亮的 SVG 图形。
文章推荐
一、 node_modules 困境
洋洋洒洒将近一万字，提出了 node_modules 的发展现状及其若干问题，每次读后都受益匪浅。
二、 Webpack 性能系列四：分包优化
详细讲述了 SplitChunksPlugin 的分包方案及其细节
三、 Chrome 新功能：支持录制、重放和测试用户操作！
Chrome 在最新的版本（Chrome 97）里面新增了一个非常好用的功能，可以帮助我们录制、回放、测试用户操作。
开源与库
一、 WASM-ImageMagick: WASM 版图像压缩器
Webassembly compilation of github.com/ImageMagick… & samples
二、 teaful: 一个小型的 React 全局状态管理器
import createStore from "teaful";
const { useStore } = createStore({
username: "Aral",
count: 0,
age: 31,
cart: {
price: 0,
items: [],
},
});
function Example() {
const [username, setUsername] = useStore.username();
const [cartPrice, setCartPrice] = useStore.cart.price();
return (
<>
<button onClick={() => setUsername("AnotherUserName")}>
Update {username}
</button>
<button onClick={() => setCartPrice((v) => v + 1)}>
Increment price: {cartPrice}€
</button>
</>
);
}
