<mp-common-profile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-id="MzAxMTMyOTk3MA==" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/e93fo6YQKNmP3YCibFqeuFenfGuV6cesicX6UicG1VZwLlibogEJmbSRNoSwx8JxuQ06WKJXgz5xyv20jicbGTUbwxw/0?wx_fmt=png" data-nickname="React" data-alias="react_native" data-signature="互联网从业者，专注于 React系列精彩内容推荐。关注大前端、Node技术全栈、Flutter、WebAssembly、鸿蒙（harmonyOS）、小程序等互联网科技领域最前沿技术，定期分享个人创业经验。" data-from="0" data-is_biz_ban="0"> 点击上方 React，关注公众号
回复加群，加入技术交流群交流
前言
用最简单易懂的语言讲述最难的知识点是我的座右铭。 基础是进阶的前提，是我的初衷。 分享一篇好文章~
在公司调整洗牌之前，大量人员被裁掉。 我这样做已经快一年了，他们其实是在培养老员工……最近，领导安排我开始笔试。 我收到的第一份简历是一位10岁的员工。 一个拥有多年经验的后端大鳄，看完简历突然一头雾水。 我应该问什么问题以及我使用了哪些框架？ 项目遇到了哪些问题？ 困难是如何解决的？ webpack做了哪些性能优化？
哎，想到这里，我突然觉得有一天我也会投简历，很有可能也会被问到同样的问题。 你看，我在现在的公司工作也快一年了，虽然没有做太多的总结。 突然感觉浑身发抖。
既然这种事情迟早要总结的，那就明天再回顾一下吧。 在创业公司工作一年，你有什么收获？ 同时，我也希望我的经历能给大家带来一些启发。
后台管理web阶段
坐标在一线城市广州，上面还在公司后台系统上工作了两三个月，使用的技术栈主要是vue2+elementUI。 由于刚来，要熟悉很多业务逻辑，也没有时间去优化，而是在入职第一天就开始写代码。
顺风[1]
为了提高写代码的效率，恰巧当时听到了tailwind，感觉很新奇，所以就引入到了项目中。 可以使用类名直接写css样式：
Tailwind可以节省大量编写类名的脑力。 同时开发时不再需要切换样式和模板，直接在类名中写入属性。 用起来真的很好吃！ 而且按照官网的说法，全部使用tailwind编码后，最终打包编译出来的css文件，基本上都大于10KB？ ！ 由于引入了elementUI组件库，无法验证，但省心却是实实在在的。
无人机CI[2]
CI工具，配置完成后，本地的npmrunbuild会手动提交到无人机上。 会帮助完成测试、代码缓存、CDN刷新等操作，并且可以设置手动部署完成后提醒飞书，整体界面看起来比较不错。 舒服的
哨兵[3]
在线日志监控，如果用户在使用过程中报错，哨兵会实时发送提醒，我们可以通过日志回放来分析错误原因，相当于客机的黑包，甚至可以回放用户的操作过程，功能非常强大。
官网服务器渲染
第三个月，我们部门接手了公司官网的工作，但开发周期只有半个月，但当时我们还没有经验。 为了保险起见，领导直接要求我们复制vue2的后端项目，所以官网并没有什么新花样。 虽然现在想想，更好的办法应该是使用nuxt.js进行服务器端渲染[4]，首屏加载速度快，而且也方便SEO。
开放图合约
开放图合约（Open Graph Contract），全称是OpenGraphProtocol，允许共享链接以图形形式显示在社交媒体上。 例如，如果不填写，则如下所示：
填充后是这样的：
如果填写了Open Graph合约，在社交媒体上分享网站，链接的内容会更加生动，这是一个小小的优化点。
版本3
做完官网后css编码，公司还有一个后端系统，这次需要从0到1搭建，所以果断申请使用Vue3。 只要能达到疗效，老板就不会在乎用什么方法，以后会尝试新的东西，这实际上是在提高公司的技术储备~
这个项目说是从0到1css编码，但在实际开发中，为了追求效率，防止踩坑，主管考察了市面上主流的后端集成框架。 这次使用的是基于Vue3-element-admin的框架。
本来想用ts来开发，但是考虑到我们团队成员ts很弱，为了防止踩坑，最终放弃了。 主要技术栈是Vue3+Vite2+VueRouter+Pinia+ElementPlus，Volar插件替代了原来的Vue2 Vetur。
来说说vue3的使用体验吧~
Vite启动速度极快，启动项目只需3秒，而vue2项目则需要十几秒，热更新也很快，开发体验好！
另外就是vue3的setup语句糖[5]，可以省掉很多无用的重复代码，比如允许手动注册组件、属性和方法不需要返回等等，好用！ 省省心吧！
Volar插件配合vscode保存代码。 不知道是配置问题还是优化不好。 没有以前vetur那么舒服了。 我查了资料，发现很多人都有这个问题。 可能是保存代码时和eslint有冲突。
H5舞台
做完Vue3项目，距离放假已经快半年了。 回国后，公司进行了人员调整。 我被调到公司自研App部门，开始做H5。 相对来说，我们公司H5的内容非常核心，但由于toC，产品对细节的要求更高，甚至有专门针对技术优化的时间表。
Webpack打包、热更新优化
刚接手H5项目的时候，遇到了一个头疼的问题。 项目文件非常大。 每次代码编译保存后，热更新时间可以是8秒或90秒。 如果热更新后在手机上运行，H5需要打包分发版本，即将打包的文件更新到CDN，打包的版本就更夸张了，有时需要十几分钟才能打包，并且上传CDN，更新一段代码只需20分钟！
毫无疑问，首先要做的就是抄作业……不，是优化webpack。
cache-loader，对规则中加载速度比较长的文件添加cache-loader，比如js文件，可以提高打包速度，降低到5分钟，但还是不够快，只是加载器本身需要被打开。 时间。
持久化缓存，继续寻找webpack包缓存的问题，再次抄作业后，发现添加持久化缓存的配置可以达到更好的效果，包明显提升！ 如果不修改webpack配置，第二次打包只需要10秒，从10分钟变成10秒，太厉害了！ 而且热点更新也会推送！ 粘贴配置，将webpack中的缓存类型更改为filesystem，并指定路径。
发布上传优化，即发布文件到cdn。 在这方面进行了两项优化。 一是提取静态文件。 对于资源大、修改频率低的文件，比如assets下的图片、动画等，干脆删除掉。 写一个脚本上传，这样每次打包上传的时候只需要更新变动较大的js和css文件即可。 二是在开发环境中更改国外云服务器的存储桶（这个因“公司”而异，因为我们公司的业务在海外），或者可以加快上传速度。
外部，将需要引用的比较大的第三方库提取出来，不要直接打入包中，加快首屏加载速度，等到需要请求时。
算法状态机
这是使用动画时需要用到的解决方案。 前端返回的动画数据会被后端处理成多帧。 每帧包含一段动画、语音和字幕，帧将按顺序播放。 ，并被改编成动画。 是一个从算法迁移过来的项目，逻辑会比较复杂，从名字就可以看出来。
获取流输出
使用fetch请求返回二补码流，通过TextDecoder进行解码，并逐级推送到显示链表中，从而逐步渲染文本内容，类似于gpt实时渲染。
Stripe第三方支付平台
Stripe是一个方便海外用户使用的第三方支付平台，类似于国外支付吧？ 功能很强大，可以看看我的另一篇文章，利用Stripe做类似gpt[6]（结帐形式）的支付跳转。 前面会有一篇文章，定制构建条纹的完整流程（以元素的形式）。
微后端框架--qiankun[7]
有一个需求，公司里的项目框架不一样，有的是vue2、vue3、react、jquery。 如果想在一个项目中实现本项目的所有功能，重画代码可能效率太低了。 这时候就需要一个解决方案，那就是微后端，可以整合不同的框架项目，并通过路由切换进行展示。 这里我们用的是乾坤，而我正好负责乾坤基地的建设。 这是乾坤的官方网站[8]。 我读过这两篇文章，qiankun构建[9]，qiankun保姆级技巧[10]，以及github上qiankun的一个很好的例子，github.com/fengxianqi/[11]
总结
这就是我今年工作中遇到的全部技术经验了！ 不知道和大厂的经历相比怎么样。 知道的小伙伴可以留言分享一下。 希望我的经历能给大家带来一些启发。 同时，我也能理解自己的局限性。 欢迎指导交流~
前面，我们会根据情况不断打造，逐步更新技术岗位，分享工作中的成长和态度的变化。 虽然有人，但也有江湖~码字不易，请多多点赞！
发表评论