第 15 期: Rclone: 一条命令提高前端部署效率

2021/11/12

前端爱好者周刊 (Github: shfshanyue/weekly),每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等,周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布,订阅平台如下,欢迎订阅。

开发利器

一、 Rclone: 支持多个云存储的,高性能的文件同步工具

Rclone

Rclone,rsync for cloud storage,是使用 Go 语言编写的一款高性能云文件同步的命令行工具,可理解为云存储版本的 rsync。

  1. 支持多个云存储,如阿里云、腾讯与、青云、AWS 等
  2. 支持按需复制,每次仅仅复制更改的文件
  3. 可断点续传
  4. 可压缩传输
# 安装 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 纯网页端的图像压缩工具

Image Tool

颜值高、功能强大,使用 WASM 的纯网页端的图像压缩工具

三、 sshshape: 简单几个点画出漂亮图形

sshshape

通过几个点就可以画出漂亮的 SVG 图形。

文章推荐

一、 node_modules 困境

洋洋洒洒将近一万字,提出了 node_modules 的发展现状及其若干问题,每次读后都受益匪浅。

二、 Webpack 性能系列四:分包优化

SplitChunksPlugin 进行分包的三要素:

  1. minChunks: 一个模块是否最少被 minChunks 个 chunk 所引用
  2. maxInitialRequests/maxAsyncRequests: 最多只能有 maxInitialRequests/maxAsyncRequests 个 chunk 需要同时加载 (如一个 Chunk 依赖 VendorChunk 才可正常工作,此时同时加载 chunk 数为 2)
  3. minSize/maxSize: chunk 的体积必须介于 (minSize, maxSize) 之间

最佳实践还是应该看看 Next.js 的配置: 源码

  1. Webpack 运行时
  2. React Framework 运行时,包括 React/React-DOM 及其它们所有的依赖
  3. 大型库,体积特别大的库
  4. 公共库,至少被 4 个 Chunk 所引用的公共模块

三、 Chrome 新功能:支持录制、重放和测试用户操作!

Chrome 在最新的版本(Chrome 97)里面新增了一个非常好用的功能,可以帮助我们录制、回放、测试用户操作。

开源与库

一、 WASM-ImageMagick: WASM 版图像压缩器

Webassembly compilation of https://github.com/ImageMagick/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>
    </>
  );
}

Profile picture

作者山月、待业在家、勤学苦练、欢迎交流。 这是我的博客