---
url: https://sugarat.top/weekly/2023-06-09.md
description: >-
  ① 使用纯CSS实现噪点效果 ② 从零开发——微前端框架实践 ③ Rspack 0.2 发布,支持 Vue! ④ StackBlitz
  WebContainers 额外支持yarn/pnpm现在 ⑤ Create Next Stack ⑥ Merse Comic - AI生成漫画
---

# 视野修炼第41期

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. 使用纯CSS实现噪点效果](https://www.zhangxinxu.com/wordpress/2023/06/css-noise/)

张鑫旭大佬的文章，在简单介绍了canvas和svg的实现之后，详细介绍了CSS版本的实现

如下所示代码也比较简单

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ1MTk0MzU5NQ==686451943595)

下面是给到的使用案例

[图片的风格化](https://www.zhangxinxu.com/study/202306/css-old-photo-demo.php)，[噪点文字特效](https://www.zhangxinxu.com/study/202306/css-nosic-text-demo.php)

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ1MjIzODkxNA==686452238914)

### [2. 从零开发——微前端框架实践](https://mp.weixin.qq.com/s/YOr1OnCEk8-XssrTyeM6Pw)

本文首先实现一个可进行子应用注册和资源加载的微前端框架，实现在一个vue3主应用中加载3个不同技术栈（vue2、react15、react16）的子应用，并且页面上渲染出各个子应用的内容；

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ2NTUzNDk2MQ==686465534961)

然后，对该微前端框架实现扩展，实现

* 运行环境隔离（沙箱）
* css样式隔离
* 应用间通讯（含父子通信、子应用间通信）
* 全局状态管理（全局store的简单使用）
* 利用应用缓存和预加载子应用提高加载性能

## 🔧开源工具&技术资讯

### [3. Rspack 0.2 发布: 支持 Vue!](https://www.rspack.dev/zh/blog/announcing-0.2.html)

> 在 0.2 版本中，新增了诸多功能，如 realContentHash、DataURI、ESM format 的支持等，同时加强了与 Webpack 的兼容性，并优化了诸多细节

> 另外，得益于对 Webpack API 良好的兼容性，对于周边生态也完成了进一步的兼容，测试完成了对 vue-loader 17（对应 Vue3）和 15（对应 Vue2）版本的兼容

大家现在可以尝试在 Vue2 / 3 项目中使用 Rspack 了

### [4. StackBlitz WebContainers 额外支持yarn/pnpm现在](https://blog.stackblitz.com/posts/announcing-native-package-manager-support/)

> 号称比本地快5倍

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ1MTIxMjk0Nw==686451212947)

### [5. Create Next Stack](https://www.create-next-stack.com/)

一个初筛化next项目的脚手架，支持通过UI的方式配置CLI初始化指令

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ2NDYwMzkwNA==686464603904)

## 🤖AI工具&资讯

### [6. Merse Comic - AI生成漫画](https://comic.merse.co/)

可以根据用户的日记自动生成漫画，还可以自定义漫画的风格

下面是官方给的案例（部分）

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ2NjcwNTU4OQ==686466705590)

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTY4NjQ2NjkxMDMwOQ==686466910309)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<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) - 前端前沿技术、资讯、方法论分享