关于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"
  }
}

对于山月

我是山月，下篇文章再会

社交:

我的项目: