关于javascript:前端爱好者周刊第3期各大厂-webpack5-实践

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

• 订阅网站: https://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"  }}

对于山月

我是山月，下篇文章再会

社交:

我的项目: