前端见闻录

最近需要搭建一个后台项目，在完成开发后，我将其重构，将 FCP 从平均 2.8 s 缩短到平均 1.2 s。

2022 年, 前端框架依然在日新月异地变化，近期有个后台的 PC 项目，刚好总结下 2022 年我开发起来比较舒适的技术栈（这里特指的 PC），且非常地有主观倾向，仅作参考。

背景

所负责的一个 rn 项目，分为用户端和医生端，这两个端有很多可复用的地方，比如相似的界面，相似的组件，相似的逻辑。

目前项目组里的项目，要么没有 mock，要么 mock 数据的方式就是将假数据写到业务代码中，不方便开发。近来刚好有时间，因此抽空对原项目进行一些改造，让其支持数据的 mock。

最近项目组收到用户反馈无法进入收到一个 RN 页面，怀疑是客户端加载页面时发生异常，但也不排除是前端代码异常导致的。

为此打算接入早先别组同学搭建的 Sentry，以便于观测与搜集前端异常。不过现有的 sdk 是基于 h5 与 node 的，rn 这方面没有对应的 sdk。sentry 是有开源的 rn sdk，但由于项目特殊性，与客户端耦合较多，因此简单自行封装一个 sdk 作为过渡，等后续负责 sentry 的同学提供统一的 RN sdk 再替换掉，这里记录一下封装的思路。

近期项目组的组件库需要维护，其中有关于组件按需加载采用 antd 组件库的方案，是通过 umijs/babel-plugin-import 来实现的。

这个方案实际上是通过分析语法，在编译阶段将模块引用转成通过相对路径来实现的。即

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);

然而这个方案实际上早在很久之前已经被 antd 官方抛弃了，antd 目前的是通过 tree shaking 实现 JS 部分的按需加载而， css 方面则认为性价比不高等原因没有额外处理，略有争议，详细可以参考 https://github.com/ant-design/ant-design/issues/23988 这个 issue 里的相关讨论。

鉴于 webpack 文档里关于 tree shaking 的篇章写的比较晦涩。在早些时候有做过一些[测试以及总结]( 关于 webpack 的 tree shaking)，但当时的理解比较不够到位。

本次借着重新梳理组件库的机会，在这个 test-webpack-tree-shaking-demo 中再次更为全面地测试并整理 webpack tree shaking 相关内容，目前主要应用 webpack 的版本仍然处于 webpack4，因此本项目也都是基于 webpack4，如有理解不到位的地方还望指出探讨。

这个主题是早前在公司分享的，主要讲的是 React Class Component 中的生命周期的变迁。但是一直没有时间整理，近来工作节奏逐渐恢复稳定，因此腾出时间来整理一下。这个期间看到 React Conf 2021 上黄玄还分享了 React Forget，有一些想法可能和当时分享的时候有所出入，但基本上还是一致的。

分享这个主题的背景是因为当时有不少新来的小伙伴是从 vue 刚转入 react 的，一上来就接触的是 hooks，反而对 react 传统的 Class Components 不熟悉，遑论生命周期的变更历史，因此就当做一个简单的科普。

2021 的经历的事情太多，留下的遗憾太多，是时候总结一下，再立一下 2022 Flag

最近有个项目转到我这里维护，项目基于 nextjs，刚好之前只有耳闻，未尝使用过，这里简单记录一下。

上面一篇主要讲述了一些技术细节，这一篇主要来讲讲踩的坑以及单纯吐槽