视野修炼第31期

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

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

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

🔥强烈推荐

1. Vite4.3 - 一系列的性能优化手段

截止到3月底4.3发了2个beta版了，通过changelog可以看到很多性能相关的优化（通过perf关键字过滤）

下面挑几个可能用得上的介绍一下

tip:下面的fsp代表fs/promise，

① 删除文件场景使用 fs.unlink 替代 fsp.unlink如果我们不需要使用这个promise

// old
fsp.unlink(filepath)

// new
fs.unlink(filepath)

② 写入文件使用 fsp.writeFile 替代 fs.writeFileSync

// old
fs.writeFileSync(filepath, data)

// new
await fsp.writeFile(filepath, data)

③ 打开浏览器指令的调用使用异步而不是同步execSync => exec

// old
execSync('xxx')

// new
await exec('xxx')

④ 使用Map替换对象{}

// old
v = {}
v[key]

// new
v = new Map()
v.get(key)

⑤ 正则表达式放在全局，而不要在某个函数中

// old
export function slash(p: string): string {
  return p.replace(/\\/g, '/')
}

// new
const windowsSlashRE = /\\/g
export function slash(p: string): string {
  return p.replace(windowsSlashRE, '/')
}

⑥ 部分startsWith和endsWith换用===

// old
str.endsWith('/')

// new
str[str.length - 1] === '/'

2. 一文了解 URL 编码

Web 项目中经常会遇到处理 Query 参数的场景

比如某个key要用传数组是用key=a&key=b还是key[]=a&key[]=b，甚至key=a,b

通过阅读这篇文章会给你带来解答

文章较为详细的介绍了 Query String 的概念

以及 qs、query-string、URLSearchParams、甚至 querystring这几个库到底有什么区别

并顺便解答在 为什么会有%HH，为什么要使用 encodeURIComponent 进行编码，它和过时的 escape 又有何区别等等疑问🤔

3. 英：Sass和原生CSS嵌套语法对比

sass 官博出的一篇文章，篇幅较小（契机是本周上线的Chrome112版本默认开启CSS嵌套语法的支持）

我们让GPT总结如下

该文为一篇关于Chrome浏览器112版本支持新的原生CSS嵌套特性的介绍，并提到了灵感来自于Sass的嵌套特性。作者表示自己和Sass团队很荣幸能够为CSS的改进做出贡献。文章同时探讨了原生CSS嵌套和Sass嵌套的差异，其中提到了三种不同的情况。Sass团队承诺不会更改现有的合法Sass代码，以便与广泛使用的浏览器不兼容。作者表示对Sass嵌套的未来持谨慎态度，并在长期计划中提到，一旦支持98％的全球浏览器市场份额的原生CSS嵌套，他们将开始将Sass传播为:is()。最后，作者表示，除非能够提出一种与CSS更兼容的方法来表示& -后缀，否则他们不会放弃当前的&-suffix行为。

4. PNPM v8本周发布

笔者这周在看文档的时候突然发现，v7 的文档顶部多了一句如下的提示

才意识到PNPM V8 上线了

由于有大版本的更新，在公司里也陆陆续续造成了一些 Case

大多是由于 CI/CD 平台上的 pnpm 插件没有锁版本，默认使用最新的pnpm版本

但是pnpm v8 要求 >Node16，但是打包机器的镜像还是 Node 14 😄

不知道各位PNPM用户本周有没有受到 pnpm 发版的影响

🔧开源资讯

5. Framer Motion - React侧可控动效库

咱们直接看2个demo 了解一下用法

tsx

import { motion } from 'framer-motion'

export function MyComponent() {
  return <motion.div
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{ duration: 0.5 }}
  />
}

tsx

import { motion } from 'framer-motion'

export function MyComponent() {
  return <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ['20%', '20%', '50%', '50%', '20%'],
    }}
  />
}

不明觉厉

6. mafs - 互动式数学图形组件库

这个也是React侧的一个组件库，看看Demo

import { Mafs, Point, Coordinates } from "mafs"

function SimplePoint() {
  return (
    <Mafs>
      <Coordinates.Cartesian />
      <Point x={1} y={1} />
    </Mafs>
  )
}