---
url: https://sugarat.top/weekly/2023-03-24.md
description: ① 如何调整静态资源加载优先级？ ② chatGPT提示语合集 ③ React新文档，Vite5，pnpm8... ④ 文心魔性作图等一大波AI资讯...
---

# 视野修炼第30期

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

**本周有大量AI相关的技术资讯，最后单独开了一部分做介绍**

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. fetchpriority - 调整资源加载优先级](https://imkev.dev/fetchpriority-opportunity)

有3个值`high（相对默认的优先级高）`,`low（相对默认的低）`,`auto (默认值)`

`<img>`、`<link>`、`<script>`和`<iframe>`等元素支持

```html
<img src="/lcp.jpg" alt="A dog" fetchpriority="high" />
```

同时`fetch`方法也支持此属性

```js
fetch("/api/data.json", { priority: 'high' })
```

下面是官方的一个例子

![](https://img.cdn.sugarat.top/mdImg/MTY3OTcyNjkwODk0Ng==679726908946)

设置前后 `LCP` 从2.6秒提升到了1.9秒

*TIP: LCP(Largest Contentful Paint)。指的是页面上最大的渲染内容的加载时间*

### [2. Open Prompt](https://openprompt.co/) - 一些适用于预设GPT角色的提示词

![](https://img.cdn.sugarat.top/mdImg/MTY3OTcyODI3MDg3Mw==679728270873)

网站收集了许多好玩的提示语（可自由分享贡献）

比如我们测试一下"效率工具"

![](https://img.cdn.sugarat.top/mdImg/MTY3OTcyODQ0MDIxMg==679728440212)

## 🔧开源资讯

### [3. React新文档：react.dev](https://react.dev/)

![](https://img.cdn.sugarat.top/mdImg/MTY3OTcyOTI5MzQ2Mg==679729293462)

感觉文档风格很像 MDN ,UI相比 Vue的文档要 low 不少感觉

* 所有示例使用 函数式组件 和 Hooks
* 旧网站地址 => https://legacy.reactjs.org
* QuickStart 首推使用 `npx create-next-app`

### [4. Modern.js v2](https://mp.weixin.qq.com/s/Ec8nw2Lt9lVQsdL2om7p9Q)

开源了3个解决方案 `Web开发框架`，`Npm包开发方案`，`文档站`

![](https://img.cdn.sugarat.top/mdImg/MTY3OTcyOTQzMDkwMw==679729430903)

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMDIwNTUzMA==679730205530)

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMDIxOTE3NA==679730219174)

大而全，没上手体验，看了下文档介绍应该还是很不错

### [5. Vite v5计划](https://github.com/vitejs/vite/discussions/12466)

* 期望 Vite 的主要版本(major) 与 Node EOL 版本对齐
* [Node团队决定将Node v16的 EOL提前7个月](https://nodejs.org/en/blog/announcements/nodejs16-eol)
* 在 2023-09-11 之后发布 Vite5 放弃对 Node 14 和 Node 16 的支持
* Vite 5 将提供引入重大变更（major version import break change）的机会（例如，用Lightning CSS 替换 PostCSS）

更多Feature => [Vite5 里程碑](https://github.com/vitejs/vite/milestone/13)

### 6. pnpm v7进入维护期，pnpm v8在路上了

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMTE0MTg2Nw==679731141867)

笔者公司里还在用 pnpm v6（hai）

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMTI2MTM2MA==679731261361)

## 🤖 AI资讯

### 7. [文心一言: 魔性作图](https://mp.weixin.qq.com/s/AhH60zeVuPTraNq7EBOTRg)

这个相信大家本周或多或少看到过，挺有意（li）思（pu）的

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMjcwODc3OQ==679732708779)

恰好笔者手里也有账号，下去找了几个试了一下

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMjg0MDI0Ng==679732840246)

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMzA0ODY3OA==679733048678)

总感觉差点意思，让GPT给我优化哈提示词
![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMzE5MzQ4Ng==679733193486)

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMzE2MzI5Ng==679733163296)

文心的账号申请推荐大家填 [百度智能云的问卷](https://cloud.baidu.com/survey_summit/wenxin.html) 企业用户体验

文生图，也可以体验一下国外的 [midjourney](https://docs.midjourney.com/docs/midjourney-discord)

下面是一个例子

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczNDk3MDk2OA==679734970968)

### 8. [GPT-4 Copilot X震撼来袭！AI写代码效率10倍提升](https://mp.weixin.qq.com/s/ATxJXbXOH9cQnx6VSkTB6A)

> 原文: [GitHub Blog: github-copilot-x](https://github.blog/2023-03-22-github-copilot-x-the-ai-powered-developer-experience/)

“一天干完一周的代码”，是个好东西，就是价格太贵了，公司里也ban掉了，不让用

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMTYwMTM4Nw==679731601387)

### 9. [chatGPT 支持插件拓展](https://mp.weixin.qq.com/s/HtmuDGtVKs6LUfwVIzBOlg)

> 原文: [openai blog: chatgpt-plugins](https://openai.com/blog/chatgpt-plugins)

> 网友拿 OpenAI 与 Apple 类比，`GPT4 就好比 iPhone`，OpenAI 为计算的下一个时代奠定了基础，Plugins能力就好比提供了一个基于chatGPT的 App Store

首批合作的插件厂商如下

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczMjI2NDE4OQ==679732264189)

当这个能力开放后，针对GPT做一些场景定制化的能力更加容易了，企业也容易推广自己的产品

### [10. Adobe Firefly](https://www.adobe.com/sensei/generative-ai/firefly.html)

Adobe 公司本周推出的 AI 作图服务。

设计师的工作效率大大提高，甚至动动嘴就能完成视觉设计

下面贴一下官网的demo

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczNTQ2MzI1NQ==679735463255)

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczNTUxMzU1MA==679735513550)

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTY3OTczNjcxNDM3NQ==679736714375)

***

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

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://www.yuque.com/chencheng/mdh-weekly) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [rottenpen：FE News](https://rottenpen.zhubai.love/) - 分享前端，生活
* [知识星球：咲奈的平行时空](https://wx.zsxq.com/dweb2/index/group/15552285284822) - 前端前沿技术、资讯、方法论分享