blog
blog copied to clipboard
Godiswill
【大前端】分享记录
[原文](https://github.com/Godiswill/blog/issues/32) Chrome Manifest V3 + Webpack5 + React18 热更新提升开发效率。 ## 解决的问题 开发 Chrome 插件的同学想必都会遇到一个问题： 每次更新代码需要在 `chrome://extensions` 扩展程序中 1. 找到对应的插件点击刷新按钮 1. 重新点击唤起插件查看效果 特别的繁琐，严重影响开发效率。  本文借助 create-react-app reject 后的工程，改造实现： 1. 支持现代 Web...
错误监控原理分析
# 错误监控 ## 前言 作为一个前端，在开发过程即便十分小心，自测充分，在不同用户复杂的操作下也难免会出现程序员意想不到的问题，给公司或个人带来巨大的损失。 这时一款能够及时上报错误和能够帮助程序员很好的解决错误的前端错误监控系统就必不可少了。 接下来我们就聊聊常见的错误发生与处理。 本文主要围绕以下几点讨论： 1. 常见JS错误类型 2. 常见JS处理错误方式 3. 上报的方式，和上报内容的几点思考 问题： 1. JS、CSS、img等资源加载失败(CDN或图床挂了，无意删了、文件名变了)怎么实时获知？而不是用户告诉你？ 2. 如何上报有用的错误信息能够让程序员快速定位错误并修复？而不是上报一些迷惑信息？ 3. 在当今无不用压缩丑化代码的工程化中，怎么利用好 SourceMap 文件，处理错误信息？ 4. 如何出了问题，不用在让用户帮助你复现？要机型？要操作步骤？ 5. 如何更好统计问题的分布(机型设备、浏览器、地理位置、带宽等)，自主根据数据来取舍兼容倾向性？ 6. ... ##...
# Web3.0 未来已来 ## 导读 谈及 Web3 大家可能有点陌生，但说到基于其构建的上层虚拟世界——元宇宙，想必大家耳熟能详。接下就以程序员的视角和本人浅薄的认知来小谈一下这些陌生又熟悉的概念，并介绍一下 Web3 的赛道以及国内发展的一些现状。 进入主题前，先抛个问题让大家思考会儿：你对 web3 的理解是怎么样的？ 偶尔跟身边的人聊起过，得到以下几个答案： 1. 偶尔听到过 web3 与元宇宙一些词汇，但不太清楚 1. web3 太虚了，依赖 AR、VR 等虚拟技术设备的普及和发展 1. web3 在当前的政策环境无法落地实现，不看好它的发展 1. 也有聊到 web3 愿景并参与其中滔滔不绝的。。。...
# 录音、上传、播放音频微信小程序实践 最近上线了一款智能外呼机器人产品，需要开发一款录音、上传、播放音频功能的 微信小程序给录音师配置外呼话术真人录音。 代码已开源，数据均已本地化处理。适合新手参考学习的完整原生微信小程序小项目。 ## 约束 磨刀不误砍柴工，良好的约束是一个团队协作开发质量保障的基础。 ### 开启 ts、less 最新的小程序已支持，less、ts 文件，无需在配置转换插件。 `project.config.json` 中配置开启支持编译 ```json { "setting": { "useCompilerPlugins": [ "typescript", "less" ] } } ``` ### ts 声明...
# 前端性能优化原理篇——Page Lifecycle [原文链接](https://github.com/Godiswill/blog/issues/25) ## 导读 性能，一直都是前端孜孜不倦探讨的话题。说到生命周期想必大家都不陌生，这都是 `React` 、`Vue` 等框架设计的核心理念，它大致都提供了数据初始化、DOM 加载、资源释放等时机钩子供大家合理使用，例如 `React shouldComponentUpdate` 对某些场景下性能优化起着重要的作用。同理，生命周期的设计理念已被现代浏览器引入并实现，理解最新标准规范对前端理解性能优化的方向就变得很重要。本文主要介绍的内容有浏览器 Tab 页生命周期相关API，一些建议和对数据上报采集的实践等。 ## 生命周期概述 ### 好奇 谷歌等浏览器曾经被吐槽过是内存的吞鲸巨兽，但你有没有发现目前已被改善，当某个 Tab 长期未被激活，再次打开时发现页面会重新刷新。占用的资源是什么时候被回收的？ 在移动设备上发现，浏览器被切换到后台时，网页上的一些任务会被降频（如 timer），甚至停止运行。浏览器是如何优化来减少内存、CPU、电量、网络资源的使用的？开发的哪些行为会干扰优化呢？ 要弄懂这些问题就需要请出今天的主角—— W3C 最新的规范 [Page Lifecycle](https://wicg.github.io/page-lifecycle/)。...
# 简历编写指南 ## 前言 [原文](https://github.com/Godiswill/blog/issues/29) 最近在做网易的一些招聘工作。收到了大量的简历，综合来看大部分人对简历明显重视不足。 导致的结果是海投，大点的厂子连简历初筛都过不了。 笔者也曾经经历过，自己写的简历自己都看不下去。后来痛定思痛，反复面试反复改不下 10 次，后来投大厂没有卡在简历初筛过。 现在把总结的经验分享给大家，希望对普通人员有帮助，大佬就一笑而过吧。 ## 如何写一份优秀的简历 写优秀的简历之前，你需要知道什么是优秀的简历。废话不多说来份最新热度很高但永久出圈明星的简历。 这里只谈论简历，无关人品。  笔者经常建议要投简历的人一般少不了这三点： 1. 简历最好 `1页`（也有十几页简历，图文并茂介绍自己有意思的作品的，在部门被抢来抢去的。） 1. `pdf格式` 最佳 1. 项目描述按 `Star 法则` 优化 1、经常有人问 1...
# React Hooks + TypeScript 最佳实践 [原文](https://github.com/Godiswill/blog/issues/28) 本文根据日常开发实践，参考优秀文章、文档，来说说 `TypeScript` 是如何较优雅的融入 `React` 项目的。 温馨提示：日常开发中已全面拥抱函数式组件和 `React Hooks`，`class` 类组件的写法这里不提及。 ## 前沿 - 以前有 JSX 语法，必须引入 React。React 17.0+ 不需要强制声明 React 了。 具体参考：[介绍全新的 JSX 转换](https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)...
# lib-flexible 源码分析 [原文链接](https://github.com/Godiswill/blog/issues/13) 比较流行的淘宝解决移动适配库 [lib-flexible](https://github.com/amfe/lib-flexible) 第一版没看。 ## 源码分析 - 先设置 `meta` ```html ``` - 源码主要做了三件事 1. 设置 `html` 的字体大小即 `rem` 1. 合理调整 `body` 大小，使内容字体大小不受 `html` 字体大小的影响。(一般rem设置的很大，影响内容阅读体验) 1. 检查 `0.5px`...
# 玩转 docker [原文链接](https://github.com/Godiswill/blog/issues/26) ## 背景 最近在捯饬一个前端性能上报分析的项目，前端由 `react` 全家桶，打包部署公司有专门的发布系统，这块就没什么顾虑。 前端团队的后端没有什么规范或通用流程，就想自己先技术选型从0到1，决定使用 `egg + mongodb`，后续也许会追加 `nginx + redis + Kafka` 相关配置。 - 问题来了：怎么简化部署配置流程？ - 答： `docker` ！ ## 目标 总体目标不外乎几点：简单、快速、安全。 - 简单...
# 可视化性能分析 [原文链接](https://github.com/Godiswill/blog/issues/24) ## 简介 > 接上篇[原理篇](https://github.com/Godiswill/blog/issues/19)，接着聊聊怎么采集数据、洗刷数据来对 web 性能进行图表可视化分析。 ## 提出问题 - 疑问 1. 开发人员该从哪方面入手改善web应用性能？ 1. 某某说：优化了性能！问：如何从数据统计上体现？ 1. 你说的性能优化，真是用户想要的吗？ > 性能谬见：性能只是加载时间的问题。 1. onLoad 触发时间？ 1. DOMContentLoaded 触发时间？ - 真实的用户体验是什么？ |...