⭐️ Webpack 分包最佳实践
SplitChunksPlugin 进行分包的三要素:
minChunks: 一个模块是否最少被 minChunks 个 chunk 所引用maxInitialRequests/maxAsyncRequests: 最多只能有 maxInitialRequests/maxAsyncRequests 个 chunk 需要同时加载 (如一个 Chunk 依赖 VendorChunk 才可正常工作，此时同时加载 chunk 数为 2)minSize/maxSize: chunk 的体积必须介于 (minSize, maxSize) 之间
哪些应该单独分包：
- Webpack 运行时
- React Framework 运行时，包括 React/React-DOM 及它们所有的依赖
- 大型库，体积特别大的库
- 公共库，至少被 4 个 Chunk 所引用的公共模块
Webpack 配置最佳实践，除了 Vue-cli 和 CRA 源码，还可以参考 next.js 源码：
https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts
📒 如何移除代码中的 console
使用
uglifyjs-webpack-plugin或terser-webpack-plugin中的drop_console配置；使用 Babel 插件
babel-plugin-transform-remove-console；简单粗暴删除，直接重写
console.log方法；console.log = function() {};手写 webpack loader 删除；
// clearConsole.js
const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {
source = source.replace(reg, "")
return source;
}基于正则匹配还是有一些问题，例如
const { log } = console或者const log = console.log.bind(console)这种就匹配不到
📒 WebRTC 录屏技术
WebRTC 是一套基于音视轨的实时数据流传播的技术方案。通过浏览器原生 API navigator.mediaDevices.getDisplayMedia 方法实现提示用户选择和授权捕获展示的窗口，进而获取 stream (录制的屏幕音视流)。我们可以对 stream 进行转化处理，转成相对应的媒体数据，并将其数据存储。
var promise = navigator.mediaDevices.getDisplayMedia(constraints);
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
📒 Go 1.18 Beta 1 已经正支持泛型
📒 使用Golang、Gin和React、esbuild开发的Blog
📒 使用 patch-package 修复 npm 库的紧急问题
如果使用的 npm 库有 bug，可以使用 patch-package 创建一个补丁包。
工程化知识卡片 022: 质量保障篇之如何优雅某个 npm 库的紧急问题
⭐️ ⭐️ fiber：受到 Express 启发的 Web 应用框架，使用 Go 开发，与 Express 的 API 非常接近
package main
import "github.com/gofiber/fiber/v2"
func main() {
app := fiber.New()
app.Get("/", func(c *fiber.Ctx) error {
return c.SendString("Hello, World 👋!")
})
app.Listen(":3000")
}