数据埋点、监控方案

数据埋点、监控方案

背景最近在设计我司的日志系统，虽然最终没有采用我的这个方案，而是使用的美团Logan日志体系。但是还是记录一下自己设计思考的过程，还是学习到了很多的。 数据埋点、监控是什么？数据埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑。 一般流程为：数据采集 -> 上报 -> 分析 -> 监控 一般需要采集什么信息？ 埋点的标识

前端工程化
埋点 监控
优化项目构建时间

优化项目构建时间

背景线上打包时间太长,修个BUG1分钟，构建发布一下1小时。 因为项目比较特殊，类似于menorepo，但又不是那种形式。最外面一层webpack，内部分为多个项目，某些项目下有多个页面，每个页面都要调一次webpack。 一个脚本会依次调取这么多个webpack启动，虽然图中采用页面的概念，但是其实是实实在在的一个小型项目。 本意是想每个项目共用一个webpack，但是同学们误解了我的意思，新

前端工程化
webpack 构建优化
自定义nextJs服务端

自定义nextJs服务端

背景我司在进行一个项目拆分，将静态展示页都拆出去，以方便构建的时候按需构建。但是遇到了问题，在迁移到一半的时候迁移不下去了，因为需要给部分页面写nginx匹配规则进入另外的项目，这个时候规则已经非常难写了。为了不再折磨人，所以改成统一入口，在node层进行路由匹配 原理之前我们的项目A是使用express后端渲染，项目B和C都是nextJS来写的。 所以我们这个时候要做的就是让项目A的expre

前端工程化
node中间件
Router简易实现
实现简易的可视化拖动生成页面

实现简易的可视化拖动生成页面

20210103 更新之前写的比较草率，只是为了实现而实现，没有进行更深层次的思考。所以打算对文章进行一个整体的重写，代码完善一下。 背景最近因为临近年关，公司内好多活动页、落地页这种简单的页面要写。每次写都是在做重复的工作。 作为一个一直以优化掉自己为目标的前端切图仔，所以打算搞个可以让产品、UI 都能用明白的工具，来实现一个可视化拖拽平台，来优化掉自己。 最终虽然在公司落地失败了，但是自己也积

前端工程化
可视化
webpack5之Module Federation

webpack5之Module Federation

Module Federation 文档参考代码 Module Federation 是什么？webpack5 的新插件，主要功能是我们将项目中的部分组件或全部组件暴露给外部。看起来其实和 npm 一样。其实不然。 加入我们有两个项目 a、b，a 会使用 b 中的一些功能。对于 npm 包的形式的话，把 b 打包，然后给 a 使用，如果说 b 有个 bug，我修复了，那我要先给 b 打包，然后再给

微前端
微前端 Module Federation
monorepo

monorepo

背景我司代码存放方式比较复杂，n个项目都在同一个代码仓库下，主要是每个项目都没有关系，然后外面搞个大的webpack，每个项目里都有个小的gulp/webpack这样处理,而且没个小项目下都有个.npmrc，指向的文件还都不同。每次即使只修改了其中的某一个小东西，就要全部发布一遍。所以打算搞一下有没有办法优化，在查找资料的时候看到了「monorepo」这种方案，不过最后放弃了这种方案，所以本篇只记

前端工程化
monorepo lerna
微前端

微前端

目前前端存在的问题？ 在目前所流行的主流框架 vue，react 等，他都是将属于一个单页面应用。在开发的过程中，随着业务的深入和复杂，将会带来逻辑定位问题、打包速度问题、部署上线问题。往往我们可能只是更改了一行 JS 代码，到最后发布的时候，整个项目却要整个重新打包编译发布。 公司可能之前的系统使用的是 JQ 或者其他框架进行开发，这个时候，我们想要追赶一下潮流。使用 react 或者 vue

前端工程化
微前端
协同编辑冲突处理算法之OT算法

协同编辑冲突处理算法之OT算法

背景我司的滴答清单是可以分享清单与人共享协作的，但是今天我自己好奇是怎么处理冲突的，试验了一番，A和B同时编辑清单，同时向服务器提交会是什么现象？最终发现，居然没有处理？处理的机制就是简单的谁是最后到达的就以谁为准,甚至都不会上锁。我惊了，然后就调研了一下业界的编辑冲突解决方案。 早期方案上锁A用户编辑的时候就给这个文档上锁，B用户被禁止编辑或请求被拒绝。 弊端： 效率低下，只有一个可编辑，一个人

其他
协同编辑冲突处理算法
React 之 同构