前几天有朋友问了我个问题： 是否可以通过 eslint 插件实现自动把属性访问变成可选链的方式。 这当然是可以的，我们来实现下： 创建项目，新建 package.json 安装 eslint 的包 然

提到打包工具，可能你会首先想到 webpack。 那没有 webpack 之前，都是怎么打包的呢？ webpack 都有哪些功能？为什么这么设计呢？ 这篇文章我们就来一起探究一下。 其实之前都不打包的

大家都用过组件库，react 流行的组件库有阿里的 ant-design、字节的 semi-design、arco-design 等。 那这些组件库都是怎么打包的呢？ 我们自己写个组件库的话，怎么写打

monorepo 是多个包在同一个项目中管理的方式，是很流行的项目组织形式。 主流的开源包基本都是用 monorepo 的形式管理的。 为什么用 monorepo 也很容易理解： 比如 babel 分

scope hoisting 是 webpack 3 就已经实现的功能了，它能优化生成代码的性能，还能实现部分 tree shaking。 那什么是 scope hoisting，它又是怎么实现的呢？

Module Federation 不是 webpack 5 的特性么？它和微前端有毛线关系？ 不着急解释，我们先写个 Module Federation 的 demo 再说。 用 create-re

昨天的文章通过 Performance 和 Memory 工具证明了打开 devtools 的时候 console.log 会有内存泄漏。 有 console.log 的时候，内存是这样的： 去掉之后

很多前端都喜欢用 console.log 调试，先不谈调试效率怎么样，首先 console.log 有个致命的问题：会导致内存泄漏。 为什么这么说呢？ 用 Performance 和 Memory 工