前端爱好者周刊第3期：各大厂 webpack5 实践

前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等。每周一发布，订阅平台如下，欢迎订阅。

• 订阅网站: weekly.shanyue.tech
• 订阅Github: shfshanyue/weekly

封面

祁连山国家公园青海片区拍摄到的荒漠猫

一句话

• Flutter 将成为未来构建 Ubuntu App 的默认选择。原文:Ubuntu Makes Flutter ‘Default Choice’ for Future Desktop Apps
• flexbox 布局时可使用 CSS 属性 gap 控制 item 间隙
• npm outdated 可查看当前项目中的过期 Package
• 2021春运全国铁路、公路、水路、民航共发送旅客预计达到8.7亿人次，比2019年同期下降70.9%，比2020年同期下降40.8%。
• 北京市文旅局推出12条赏花游主题线路，有迎春、玉兰、桃花、梅花、杏花等，详见 北京的春天去哪里看花？
• 微信 Mac 桌面版开始支持朋友圈

开发利器

一、 bestofjs: 发现 Javascript 最好的框架与库

这里有 JS 生态最流行的库，实时刷新并推荐，并且可每周订阅

• repo: ritz078/transform

二、 Lorem Picsum: 随机一张指定尺寸图片 API

https://picsum.photos/200/200 将随机从 Unsplash 取一张指定尺寸的图片

• repo: DMarby/picsum-photos

三、 risingstars: 2020年 Javascript 明星项目

2021 年，JS 各个生态圈中最流行的框架及周边产物，如 React 生态圈、Vue 生态圈、GraphQL 生态圈、构建工具生态圈等

四、 User Agents: 关于 UA 的一切

拥有大量 UA 的数据库及相关功能

• 可获取任意平台的 UA (Mac/Windows/Android)

• 可获取任意 Spider/Crawer 的 UA (Baidu/Google/Bing)

• 可随机生成 UA

• 可解析 UA

五、 Browser Logos: 浏览器高清分辨率 Logo

这是 Github 的一个仓库，你可以直接引用地址，找到任意浏览器高清分辨率的Logo。

如果引用 Github 地址比较慢的话，你可以试试 jsdelivr 的 CDN

文章推荐

一、 作者尤雨溪视频直播下一代前端构建工具 Vite讲解 （中英双语字幕，B站可看）

Vite 一个部分是基于 ESM 的利用 esbuild 的开发服务器，另一个部分是基于 Rollup 的配置化的打包器。视频中尤大将使用一个 Demo 进行演示，并讲解关于它的哲学思考。

视频已被热心小哥制作成双语字幕视频，并上传到了 B 站。

二、 字节商业变现团队 webpack5 业务实践

1. FilesystemCache: 更快的二次构建
2. Prepack: 更早的编译期计算，更小的体积
3. Asset Modules: 资源加载内置
4. Named ChunkID: 更强的永久缓存能力
5. 深度 TreeShaking 能力
6. 内置 Worker/WASM 构建能力
7. Node Polyfill 去除，如 crypto、querystring 等

总结下来更快的打包速度、更小的打包体积

三、 腾讯企鹅辅导 webpack5 升级实践

1. Module Federation: 多应用共享依赖打包，扔到 CDN 共享

与上边字节差不多，总结下来更快的打包速度、更小的打包体积。但是好在给出了数据

第一次打包

修改源码后，再次打包

打包大小对比

四、 All in one：项目级 monorepo 策略最佳实践

目前 monorepo 已成为了 npm7、yarn 的标准功能，未来会有更多的 project/package 通过 monorepo 的方式维护，许多公共库如 babel、react 也通过 monorepo 维护。

通过 monorepo 可以更好地管理多 Pakcage 依赖，复用配置及公共的 devDep 等，现在快来学习吧。

五、 一文详解 CSS in JS

关于 CSS in JS 的历史

开源与库

一、 bytemd: 字节出品 Markdown 编辑器

字节出品的 Markdown 编辑器，由 Svelte 构建，同时支持 React/Vue 组件等，支持公式(math)、脚注(footnote)、流程图(mermaid)等复杂富文本内容。另外，掘金社区的编辑器也是基于此构建

bytemd 基于最流行的 Markdown 解析器 remark与 最受欢迎的便捷器 codemirror，基于流行库，拥有更强的扩展能力，你很容易扩展 Plugin，如微信脚注、多样主题等

• npm: bytemd

二、 nodegui: 使用前端开发跨端桌面应用

使用前端技术基于 QT5 的桌面跨端解决方案，可以使用 React/Vue/Svelte 框架来开发跨端应用

• repo: nodegui/nodegui

• npm: @nodegui/nodegui

三、 docusaurus: facebook 出品文档化工具

facebook 出品的文档化工具，在 Github 已经有两万颗星星，基于 React 可轻松扩展页面，定制能力较强。

• repo: facebook/docusaurus

• npm: docusaurus

四、 tinyhttp: 一个用以替代express的轻量web框架

tinyhttp 创建于九个月前，还是一代很年轻的 http 框架，因为没有任何历史包袱，同时支持 TS，并打包成原生 ESM。它有诸多优点

1. 比 Express 快两倍
2. 支持 Express 的所有中间件
3. 没有历史包袱，支持 ESM 与 TS
4. 预定常见中间件，如 logger、router 等

tinyhttp 能不能替代 express，让我们拭目以待吧 (应该不能)

• repo: talentlessguy/tinyhttp

• npm: tinyhttp

五、 isbot: 判断请求是否一个机器人

能够有效识别蜘蛛、爬虫等，但不能识别伪装 UA 恶意爬取数据的机器人

• repo: omrilotan/isbot

• npm: isbot

版本发布

一、 esbuild v0.9.0

支持 package.json 中 exports 字段的支持

{
  "name": "your-pkg",
  "exports": {
    "import": "./imported.mjs",
    "require": "./required.cjs"
  }
}