首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏CODING DevOps

    大型前端项目 DevOps 沉思录 —— CI 篇

    本文作者:成龙 腾讯前端开发工程师,负责腾讯文档前端开发与研发效能提升,AlloyTeam成员。   这对于发布频率越来越高,发布周期越来越短的现代大型项目中无疑是一个最优解。 3. 大型项目中产物->制品的建立 对于大多数项目来说,在代码编译完成生成产物后,部署项目的方式就是登录发布服务器,将每一次生成的产物粘贴进发布服务器中。 总结一下,在每次编译完成后,产物将会进行如下的整理以生成最终的前端制品: 1. 针对静态文件,如 CSS、JS 等资源将会发布到云对象存储中,并以此为源站同步给 CDN 做访问速度优化。 2. 这是每一个成功的大型项目最终一定要实现的目标。 参考资料 1.

    58630编辑于 2021-12-03
  • 来自专栏腾讯云原生团队

    大型前端项目 DevOps 沉思录 —— CI 篇

    成龙,腾讯前端开发工程师,负责腾讯文档前端开发与研发效能提升,AlloyTeam成员。 编译并整理产物 在中小型项目中,这一步通常会被直接省略,直接将构建产物交由部署环节实现。但对于大型项目来说,多次频繁的提交构建会产生数量庞大的构建产物,需要得到妥善的管理。 这对于发布频率越来越高,发布周期越来越短的现代大型项目中无疑是一个最优解。 只有在单元测试、集成测试、E2E 测试覆盖率极高,且通过变异测试得出的测试用例质量较高的情况下,才能对项目质量有一个整体的保证。 大型项目中产物->制品的建立 对于大多数项目来说,在代码编译完成生成产物后,部署项目的方式就是登录发布服务器,将每一次生成的产物粘贴进发布服务器中。

    59130编辑于 2021-12-03
  • 来自专栏趣学前端

    前端经验总结」大型业务项目中,前端如何撰写设计文档

    项目开发流程 看一下这个项目开发流程图,当项目启动之后,产品的同事会先来一轮需求宣讲,告知大家本期大致做什么,产品的同事会整合各方的发言在完善一轮功能。 下面我以最新一期接第三方支付的需求为例,讲讲这个耗时半个月的项目是怎么写前端设计文档的。 差异整理见2.系统的差异化功能整理 2、数据操作差异化 最重要是弄清楚数据权限,所以通过表格的方式将所有的按钮按照三种类型分类呈现,可以让后续的功能设计更加清晰。 批量是为了解决超过100条数据操作的问题,所以批量导入的数据是不设限制的,这个时候后端可能一次性给过来几千条数据,前端一次性加载有一定概率导致页面卡顿。 方案名称 优点 缺点 通过账号信息 1、如果接口返回了明显的标识可以区分当前用户的类型以及支付类型,可以直接使用; 2、如果没有,则前端按照用户的类型,手动添加支付类型标识。

    1.1K30编辑于 2023-03-31
  • 来自专栏程序员成长指北

    基于微前端大型中台项目融合方案

    这篇文章通过实现一个商城后台,介绍了基于 umi 框架的微前端落地方案,通过这篇文章,你可以收获 超级简单的、可用于生产环境的基于 umi 的微前端实践,包括一套示例代码 全新的、基于微前端大型中台项目前端组织方式 ❝一些技术栈 umi[1] 插件化的企业级前端应用框架,帮助你更好更快的开发 React 应用 qiankun[2] 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 ,可以完美的拆分大型中台项目,也可以平滑的升级历史应用。 总结 微前端大型中台项目带来了福音,我们可以非常灵活的进行应用拆分和组合。基于这一套玩法,我们不仅可以完成“总分”形式的组合,也可以实现“任意套娃”,极大的提升了中台应用的灵活性。 我想象中未来的中台前端也是微服务化,每个小组维护自己的数据和页面,通过“总分”和“套娃”组成一个大型中台应用。

    1.7K10发布于 2020-09-08
  • 来自专栏用户6296428的专栏

    适用于既有大型MPA项目的“微前端”方案

    作者:杨超 团队:业务中台 一、背景 对于大多数有点历史的复杂前端项目来说,应该已经经历了从刀耕火种的大型单仓库构建到多业务应用独立开发部署的过程。 毕竟, MPA架构的前端不是 生而为快,其最大的优势在于开发和维护的高效。 那么,在面对一个大型的 MPA架构前,我们的页面还可以再快一点吗? html = html.replace(/<(div)([^>]*)\/>/, '<$1$2></$1>'); 3.4 基座改造 RouteMonitor & PageLoader 整个单页容器的部分我们封装成了 2.拦截原生 history变更 监听全局 popstate事件,并在 state统一返回页面url,方便浏览器前进后退时通过 url 获取相应的子页面。 2、子页面资源解析&diff更新 在成功获取 html-entry后, PageLoader会通过上述的 DOMParser将其解析为一个 document对象(与全局document对象类似),内部再进一步解析出其

    2.1K20发布于 2020-08-24
  • 来自专栏腾讯技术工程官方号的专栏

    大型前端项目的断点调试共享化和复用化实践

    作者:enoyao,腾讯工程师 背景 随着我们项目越来越大,我们有可能需要维护很多的模块,我们腾讯文档 Excel 项目大模块有 10 几个,而每个大模块分别有 N 个小模块,每个大模块下的小模块都有主要的负责人在跟进模块问题 ,让他去慢慢定位问题,这样的每个新同学对模块的熟悉,学习和维护的成本就会变得越来越大,项目越大这种情况就会越严重! 方案 由于上面的问题真的很痛,我们在爬滚中逐渐摸索了一套方案,我们暂且叫它为基于断点调试的共享化和复用化的实践方案吧,这里有个关键词是断点,相比作为每一个开发者都不陌生,在我们前端,模块定位问题的时候, 12 列 对于大型项目来说,每一个小 Bug 的调试链路的时间成本都是无比巨大的,也是难以复刻和重现的,我们能做的就是当再次遇到相似问题的时候,复用相似的调试经验。 当然实际情况可能还要比想象中复杂,举个简单的例子:因为分发的开关有可能会注入到一些被打包到 worker 的代码里面,worker 在大型项目中运用的很多,但是 worker 里面无法读取 document

    1.1K107发布于 2020-10-10
  • 大型前端项目性能瓶颈:内存泄漏排查与解决方案

    大型前端项目性能瓶颈:内存泄漏排查与解决方案 背景与症状 长时间使用后页面越来越卡顿,滚动或交互明显变慢;内存占用持续上升且不回落 典型指标:用户设备内存占用(UA-specific memory)上涨 、FPS 降低、GC 频率升高、主线程占用增多 高风险场景:大型单页应用、长列表、复杂图表/Canvas、WebSocket/SSE、频繁路由切换、跨标签页缓存 常见泄漏模式 未清理的事件/定时器/观察者 :组件销毁后闭包仍持有大对象或 DOM 引用 WebSocket/SSE/Worker:连接与线程未按生命周期关闭 图像与 Canvas:未释放引用、离屏 Canvas 未清理、超大位图持有 路由与微前端 周期性采集 UA-specific memory 与页面交互事件;异常升高告警 错误平台:记录 OOM、AbortError、TimeoutError 等与内存快照元数据(路由、设备) 指标面板: 前端 Puppeteer 内存趋势脚本 文档:是否记录组件与资源生命周期 知识库:是否沉淀常见泄漏模式与修复方法 结果与总结 通过快照对比与保留路径定位,结合资源生命周期清理与缓存策略,可系统性消除内存泄漏 在大型前端项目中建立

    58210编辑于 2025-12-15
  • 大型前端项目代码拆分:按业务模块 功能维度的实战思路

    大型前端项目代码拆分:按业务模块 / 功能维度的实战思路 目标:提供一套在大型前端项目中实施代码拆分的可执行方法,覆盖按业务模块与按功能维度的两种视角,并给出目录规范、构建配置、状态与依赖治理、迁移步骤与实战案例 适用场景:技术能力复用高、跨业务通用(UI、表单、网络、权限、i18n) 核心原则:横向复用、低耦合、稳定接口与语义化版本 优势:统一维护避免复制;风险:共享层升级影响面广,需契约测试与变更告知 目录与项目结构 Monorepo(推荐大型项目) repo/ apps/ web/ # 主 Web 应用(聚合业务模块) admin/ product/ member/ shared/ ui/ utils/ network/ pages/ routes/ store/ 适用中型项目或小团队 模块间通信优先事件总线(pub/sub),定义事件命名与载荷结构 状态边界:全局只保留会话级核心(登录、权限、主题);业务状态留在模块内,通过共享服务或事件同步 构建与加载策略 路由级拆分与多入口 多入口:大型模块或应用独立入口

    25710编辑于 2025-12-15
  • 来自专栏程序员的知识天地

    如何阅读大型前端开源项目的源码,授人以鱼不如授人以渔

    这篇文章主要讲的是阅读大型前端开源项目比如 React、Vue、Webpack、Babel 的源码时的一些技巧。目的是让大家在遇到需要阅读源码才能解决的问题时,可以更快的定位到自己想看的代码。 授人以鱼不如授人以渔,希望大家可以通过这篇博客,了解到阅读大型前端项目源码时的切入点。在之后遇到好奇的问题时,可以自己去探索。 因为一个项目是在不断迭代和重构的。不同版本之间可能是一次完全的重写。比如 Vue 2.x 和 React 16。 这里要强调一下,大型的开源项目一般都会有一个 Contribution Guide,目的是让想贡献代码的开发者更快上手。里面就有讲怎么在本地构建代码。 我们鼓励大家在本地把大型项目的源码跑起来,自己随意把玩,研究。因为源码也是普通的代码,并没有太多门槛。

    1.5K10发布于 2018-10-27
  • 来自专栏君赏技术博客

    建议大型项目用上Try Catch建议大型项目用上Try Catch

    建议大型项目用上Try Catch 我们在平时项目做功能的时候,经常会遇到崩溃的情况。如果是我们在开发测试阶段,我们可以找到原因修复。但是遇到已经上线,出现这种问题。 最近写的项目用Swift语法进行编写的,对于之前我们在Object-C中NSError**类型的指针标识遇到了什么错误,现在转成Swift方法直接进行throws进行抛异常。 比如我刚刚写的项目,就用上了,感觉用完顿时高大上了许多。

    1.2K10发布于 2018-08-31
  • 来自专栏愿天堂没有BUG(公众号同名)

    SpringCloud实战:项目准备,构建大型实战项目

    项目准备阶段 本章中,我们将开始一个大型实战项目——博客网站。通过“以战代练”的方式来学习如何构建Spring Cloud微服务架构,让读者走出理论的丛林,在实践中玩转微服务架构。 一个好的项目开发,产品设计阶段需要占到整个项目进度的50%甚至更多,才能保证整个项目开发的合理性。 一个优秀的产品应遵循以下几个原则。 用户至上。 根据5.2节的需求分析,可以使用Axure设计出如图5-2到图5-4的原型图。 由于篇幅有限,无法将所有原型界面列举出来。要看全部原型设计界面,请自行下载本文的配套资料。 (2)按照架构图5-5所示,在blog工程下分别创建子工程,创建好后的结构如图5-7所示。 本文给大家讲解的内容是springcloud实战:项目准备,构建大型实战项目博客网站 下篇文章给大家讲解的是springcloud实战:从公共模块入手搭建一套完整的微服务架构; 觉得文章不错的朋友可以转发此文关注小编

    1K30编辑于 2022-10-28
  • 来自专栏小白维基

    「翻译」如何组织大型 Python 项目

    分层架构确实能够有效降低大型项目的复杂度,方便独立开发。但也存在一些缺点,比如容易在高层产生过多代码,完全实施分层需要花费时间等。 总体来说,尽早引入分层架构,能够减少后期的重构工作量,是管理大型 Python 项目的一个有效方式。 本文通过一个真实的大规模 Python 项目案例,生动地介绍了分层架构的实施过程、优势和不足,对于管理大型项目很有借鉴作用。 看到上面的描述,你大概率会下意识地认为这个项目的代码肯定无比的混乱。坦白讲,我也会这么想。但事实是,至少在我工作的领域,大量的开发人员可以在一个大型的 Python 项目上高效地工作。 如果你正在开发一个大型的 Python 项目,或者哪怕是一个相对较小的项目,不发试试分层结构,还是那句话:越早分层需要面对的麻烦就越少。

    97430编辑于 2023-08-09
  • 来自专栏玩转JavaEE

    大型项目的 Gitflow 实践

    1、项目背景,简单了解一下; 2、svn迁移git的过程,简单介绍迁移的经过; 3、正式使用gitflow前的尝试,如何尝试,尝试结果等; 4、研发模式调整,为什么调整,如何考虑的; 5、敏捷思维,gitflow 一、项目背景 我们的产品作为公司最重量级的产品,尝试使用git时(2016年10月)研发团队总体107人左右,研发经理6人、需求12人、架构师1人、系统分析师1人、测试26人、开发61人,整个团队负责全国 2、本质的问题,把产品当成了项目开发,不到20人的主干团队开发产品规划功能,剩余90人都在忙地区交付,2:9的人员配比,重交付轻研发,目标是快速交付,客户说啥做啥,结果质量很不理想,发布后问题非常多。 1、由原来按地区负责,调整为按业务负责,单独有一个团队负责地区,原来负责产品人数:负责客户人数是2:9,产品当成了项目做,结果产品质量不高,问题多,做出来的东西不符合客户,个性化需求就做配置,冲突需求就做配置等等 首先,gitflow仅仅是一个工具,能够有效提高发布频率,让大型项目更加灵活,带来的不便就是有一定的学习成本,管理成本有所提高(需要配套的工具才能降低),提高效率方面需要结合很多其他方面才能提高。

    61140编辑于 2022-03-04
  • 来自专栏python编程军火库

    python 大型项目神器实战

    / python 生产实战 python 大型项目神器实战 / 在 fastapi 1.1 依赖注入适用场景列举: 1.业务逻辑复用 2.共享数据库连接 3.安全机制、权限校验、角色管理等 所有上述使用场景,借助于依赖注入可提高代码复用率,减少代码重复。 2 依赖注入实现方案 在看具体的实现依赖注入之前我们先从流程上来理解一下整个数据流转。 当一个新的请求到来的时候,实际的调用流程如下: 1.调用依赖项函数(传递合适的参数) 2.得到依赖项目函数的返回结果 3.把返回结果传递给路由函数中对应的参数 4.路由函数中业务流数据处理 5.获取的数据返回给客户端 /前端 2.1 函数级依赖项 # -*- encoding: utf-8 -*- from fastapi import Depends, FastAPI app = FastAPI() async

    1.1K40发布于 2021-05-11
  • 来自专栏DevOps时代的专栏

    大型项目的 Gitflow 实践

    1、项目背景,简单了解一下; 2、svn迁移git的过程,简单介绍迁移的经过; 3、正式使用gitflow前的尝试,如何尝试,尝试结果等; 4、研发模式调整,为什么调整,如何考虑的; 5、敏捷思维,gitflow 一、项目背景 我们的产品作为公司最重量级的产品,尝试使用git时(2016年10月)研发团队总体107人左右,研发经理6人、需求12人、架构师1人、系统分析师1人、测试26人、开发61人,整个团队负责全国 2、本质的问题,把产品当成了项目开发,不到20人的主干团队开发产品规划功能,剩余90人都在忙地区交付,2:9的人员配比,重交付轻研发,目标是快速交付,客户说啥做啥,结果质量很不理想,发布后问题非常多。 1、由原来按地区负责,调整为按业务负责,单独有一个团队负责地区,原来负责产品人数:负责客户人数是2:9,产品当成了项目做,结果产品质量不高,问题多,做出来的东西不符合客户,个性化需求就做配置,冲突需求就做配置等等 首先,gitflow仅仅是一个工具,能够有效提高发布频率,让大型项目更加灵活,带来的不便就是有一定的学习成本,管理成本有所提高(需要配套的工具才能降低),提高效率方面需要结合很多其他方面才能提高。

    1.1K50发布于 2019-10-21
  • 来自专栏PM吃瓜(公众号)

    大型项目中的敏捷项目管理实践

    大家现在知道了,又遇到有中国特色的项目了,"需求范围不确定,资源限死、时间限死",大家会说不是战略项目吗,资源怎么会限死呢? 考虑该如何实施这个项目时,似乎传统的项目管理从计划来分配资源模式以及采用瀑布型的开发方式,根本行不通。 单元测试的实践,由于时间紧研发人员都担心会影响项目进度,因为本身测试代码工作量也不少。 由于团队之间对立情况,反而加剧了对文档传递的依赖,项目进度慢了下来。 所以,如果研发团队,在进行缺陷修复时,考虑先把一个 story 的缺陷全部修改完,再修订其他 story 的缺陷,应该可能交付 2 个 story 的,虽然对软件整体而言,缺陷没变,但是交付的商业价值却是更多的

    1K20发布于 2019-08-12
  • 来自专栏AustinDatabases

    MongoDB “升级项目大型连续剧(2)-- 到底谁是"der"

    2 开发方并不认为当前的数据库产品有特别大的问题,并不愿意在此事上去消耗他们的精力。 3 运维方无动力升级产品,目前的产品运行良好,也无其他需求方提出异议,对数据库的功能和性能提出需求。 ,升级只要达到对应的目的即可,特别新或刚出的数据库版本,在我们这些老DBA的眼里都是坑,尤其核心的业务,我是不会去盲目升级到最新的版本,顶多是这个版本的上一个版本,或这个版本的最新的小版本,且至少1-2年以上 hidden节点的问题,在进行数据库备份的时候,备份上传期间磁盘会继续上涨,尤其hidden节点,因为不在用户的可见范围内,但hidden 节点本身会影响成本和磁盘空间的上涨,对于云厂商是一个难以解决的问题 2 基于上的问题,我们你可以整理好一个文档,然后发给相关的部门,把升级的好处以及对他们带来的利益,记住你做一件事,不是有利于你就可以推动而是要有利于其他人,他们才会支持,干活如果都是这样,你还会是项目里面的

    17500编辑于 2025-04-23
  • 「小滴课堂」全栈-商业级大型前端项目大课-小滴云在线教育平台

    前端全栈介绍 前端全栈指的是同时具备前端开发和后端开发能力的技术人员。 在传统的开发团队中,前端和后端开发通常是由不同的人员分工来完成,但随着互联网技术的不断发展,越来越多的公司开始倾向于招聘同时具备前端和后端开发技能的全栈工程师。 前端全栈工程师通常会掌握多种技术,包括HTML、CSS、JavaScript等前端技术,以及Node.js、Python、Ruby等后端开发语言。 [ { "id": 1, "name": "Alice", "email": "alice@example.com" }, { "id": 2, 所以这便凸显了前端工程师的重要性,如果没有经过前端的编译处理,用户在请求使用服务时会变得难以上手。那么在获取 JSON 格式的数据后,前端人员如何进行处理呢?

    58610编辑于 2024-05-07
  • 来自专栏被删的前端游乐场

    我独到的技术见解--大型前端项目的常见问题和解决方案

    或许你会感到疑惑,怎样的项目算是大型前端项目呢?我自己的理解是,项目的开发人员数量较多(10 人以上?)、项目模块数量/代码量较多的项目,都可以理解为大型前端项目了。 在前端业务领域中,除了大型开源项目(热门框架、VsCode、Atom 等)以外,协同编辑类应用(比如在线文档)、复杂交互类应用(比如大型游戏)等,都可以称得上是大型前端项目。 对于这样的大型前端项目,我们在开发中常常遇到的问题包括:项目代码量大,不管是编译、构建,还是浏览器加载,耗时都较多、性能也较差。各个模块间耦合严重,功能开发、技术优化、重构工作等均难以开展。 其实大家也能看到,大型前端项目中主要的问题便是“管理混乱”。所以我个人觉得,对于代码管理得很混乱的项目,你也可以认为是“大型前端项目(笑)。 之前这块我也有简单研究过,可以参考《大型前端项目要怎么跟踪和分析函数调用链》。

    7.9K45编辑于 2024-02-02
  • 来自专栏企鹅号快讯

    大型网站技术架构:Web 前端性能优化

    的地方还是要考虑好是否要用ajax 来自:Arno 的专栏 - SegmentFault 链接:https://segmentfault.com/a/1190000007624980 文章参考自:李智慧的《大型网站技术架构

    1.5K60发布于 2018-02-20
领券