iframe框架_性能优化去除iframe脚手架升级方案
《去Iframe后领域本地调试指南》
首先理解去Iframe之后的前端模型
去Iframe之前,每个领域有独立的Node端和静态资源。通过 iframe 的方式内嵌在工作台中,与工作台、其它领域互不干扰。前端框架作为领域静态资源的一部分存在,每个领域中都有一份前端框架。
去Iframe之后,所有去Iframe的领域共用同一份前端框架。工作台中首先加载一份公共的前端框架(来自于统一Node),然后在打开领域节点的时候,再加载领域的扩展,此时的领域扩展只包含自定义组件、自定义配置、扩展脚本等。
原有调试方法与新模型的冲突
去Iframe之前,本地调试时需要在本地启动 Node 端与静态资源(一般是 npm run debug:server 和 npm run debug:client),基本上能复原90%以上的前端场景。
此时,调试领域前端的时候,直接修改前端工程即可,调试领域后端的时候,使本地启动的Node端连接到本地的业务后端即可。虽然需要同时启动 debug:client、debug:server,占用内存较多,但是逻辑还算是比较清晰的。
在去Iframe之后,原来的方式已经不能复现实际场景了。要完整复现的话,需要使用如下的方式:
启动工作台的前端、启动前端框架、启动领域前端扩展、启动Node服务
修改工作台中的配置,或添加新菜单,使其能指向本地的前端框架、本地的前端扩展
开始调试
这种方式需要启动的项目过多,步骤繁琐且内存消耗大,影响开发调试的效率。
新的调试思路
新的调试是使用网络代理的方式,将线上环境(daily/test/pre/prod/sandbox/iter等均可)中的一部分资源调用转向本地。
这中间的关键点,就是将线上的资源重定向到本地。主要有两种方式:
浏览器级别的转发,需要浏览器插件(如Resource Override),仅主流浏览器(Chrome、Firefox及新版Edge、Opera、QQ、搜狗等基于Chrome内核的浏览器)支持。
系统级别的转发,需要配置系统级网络抓包调试工具(如Charles、Fiddler等,部分收费)
另外因为浏览器的安全限制,部分转发需要使用HTTPS证书,涉及到在本地颁发、安装和使用HTTPS证书。调试前端扩展的时候,如果使用的Chrome等浏览器,还可使用 http://127.0.0.1 的方式绕过,如果是调试后端,需要cookie,那就需要设置好HTTPS证书了。
关于新调试思路中提到的工具及其详细的解释,参见我之前提供的另一篇文档:
此处为语雀文档,点击链接查看:
https://www.yuque.com/docs/share/eb9c716f-6de7-4b2a-ab3e-8d7d0991e5e0?# 《“偷天换日”调试方法》
领域调试
上面的文章中主要解决的前端框架调试的问题。部分思路可参考,不过它没有明确指出领域的调试流程。
下面我详细解释下领域的前端和后端调试的流程。
下面所有的流程都假定开发者使用了Chrome浏览器,安装了Resource Override插件。
如果需要调试IE等不支持插件的浏览器,需要自己配置Charles等工具,此处不展开。
领域前端扩展调试
按照新的调试思路,领域前端调试时主要是完成一件事:转发领域的前端扩展到本地。
举例来说,在daily环境中,采购的前端扩展资源是类似这样的地址:
https://u8cupu-daily.yyuap.com/upu/javascripts/extend.min.js?_=a9cc97f7-29fa-4b70-90e4-eaa3a1175c93
领域使用 npm run debug:extend
启动本地扩展时,一般会提供这样的地址:
http://127.0.0.1:3005/static/javascripts/extend.js
我们可以在Resource Override插件中配置上如下的转发:
From |
To |
https://u8cupu-daily.yyuap.com/upu/javascripts/extend.min.js* |
http://127.0.0.1:3005/static/javascripts/extend.js |
CSS同理,不再赘述。
领域后端调试
Resource Override不仅能转发前端资源,也能转发后端接口。
一个正常的后端接口请求,一般是如下的流程:
转发有两个方式:
拦截“浏览器 -> 统一Node”的过程,转向本地Node服务或领域后台
拦截“统一Node -> 领域后台”的过程,转向本地领域后台
因为统一Node在远程服务器上,除非本地调试的后端能用端口映射的方式在远程暴露出端口,否则网络上是不通的。所以这里没有选择这种方式,而是用了在浏览器 -> 统一Node 的过程进行拦截的方式。
统一Node中业务比较简单,除了 POST /meta 等为数不多的接口是对后端接口进行了再加工,其它的大多是 /uniform/ 开头的纯转发接口。
一般来说,调试的时候只需要配置 uniform 接口的转发即可。
这个转发也有两种方式:
本地启动一份统一Node的代码,并将 /uniform/* 的接口转发到本地。
本地不启动Node,直接把 /uniform/* 接口转到本地后端服务。
假设本地Node使用3007端口,本地领域后端使用8080端口,并假设我们要转发daily环境的接口:
那么方案一需要配置如下的转发:
From |
To |
https://u8c-daily.yyuap.com/mdf-node/uniform/* |
http://127.0.0.1:3007/uniform/* |
方案二需要配置如下的转发:
From |
To |
https://u8c-daily.yyuap.com/mdf-node/uniform/* |
http://127.0.0.1:8080/* |
注意因为后端接口一般需要用到Cookie,而线上环境使用的域名是 .yyuap.com或.dowork.com等域名,所以转发目标不能配置 http://127.0.0.1,而应该相应地使用 .yyuap.com 或 .diwork.com 的域名。
但是这会带来新的问题,在 daily / pre / prod 等环境中,工作台通过 HTTPS 的方式加载,HTTPS 的页面里面不允许请求 HTTP 的资源(除非是 http://127.0.0.1),所以需要配置成HTTPS的域名,这会涉及到本地的HTTPS证书的问题。
更新后的配置为:
From |
To |
https://u8c-daily.yyuap.com/mdf-node/uniform/* |
https://local.yyuap.com:3007/uniform/* |
或
From |
To |
https://u8c-daily.yyuap.com/mdf-node/uniform/* |
https://local.yyuap.com:8080/* |
关于HTTPS的证书相关的设置,可以参考框架调试那篇文档中的内容:https://www.yuque.com/docs/share/eb9c716f-6de7-4b2a-ab3e-8d7d0991e5e0?# 《“偷天换日”调试方法》。
后面可能会再提供一个标准的用于后端调试的Node端,即使用方案一。到时候会将相关证书等内置在工程中。
iframe框架_性能优化去除iframe脚手架升级方案相关推荐
- java电商秒杀深度优化_【B0796】Java性能优化亿级流量秒杀方案及电商项目秒杀实操2020视频教程...
Java视频教程名称:Java性能优化亿级流量秒杀方案及电商项目秒杀实操2020视频教程 java自学网[javazx.com] 性能视频教程 it教程 Java自学网收集整理 java论 ...
- 字节跳动 Go RPC 框架 KiteX 性能优化实践
本文选自"字节跳动基础架构实践"系列文章. "字节跳动基础架构实践"系列文章是由字节跳动基础架构部门各技术团队及专家倾力打造的技术干货内容,和大家分享团队在基础 ...
- oracle的优化适用于mysql吗_性能优化之数据库优化,适用于Sqlite、Mysql、Oracle、Sql server,详细介绍了索引和事务及部分针对Sqlite的优化...
本文为性能优化的第一篇--数据库性能优化,原理适用于大部分数据库包括Sqlite.Mysql.Oracle.Sql server,详细介绍了索引(优缺点.分类.场景.规则)和事务,最后介绍了部分单独针 ...
- oracle sequences优化_性能优化-Oracle RAC中的Sequence Cache问题
性能优化-Oracle RAC中的Sequence Cache问题 enq: SQ - contention 在RAC情况下,可以将使用频繁的序列Cache值增加到10000,或者更高到50000,这 ...
- mysql客户端工具_性能优化-理解 MySQL 体系结构(MySQL分库分表)
实例和数据库 我们通常所说的 MySQL 数据库服务器由一个实例(instance)以及一个数据库(database)组成.实例包括一组后台进程/线程和许多内存结构,用于管理数据库:数据库由一组磁盘文 ...
- vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多 问题起源于我们的一个页面,下 ...
- 使用UE4开发VR项目_性能优化(一)_常用工具
原作者:Mullin-ぼくリん <使用UE4开发VR项目-性能优化>系列文章将分成三篇分别介绍使用UE4开发VR项目的一些工具使用和VR优化思路.目的是总结UE4开发VR项目中常用的一些调 ...
- apache php 调优_性能优化之PHP优化
一.语言级性能优化(一) PHP 性能问题的解决方向 PHP语言级别的性能优化 => PHP周边问题的性能优化 => PHP语言自身分析.优化 1.压力测试工具 Apache Benchm ...
- mysql 递归查询 效率_性能优化实战-sql递归查询效率低下
今天在做一个热门赛事列表查询的接口压测 http://192.168.10.98:8094/match/page?matchType=0&matchTime=0&matchStatus ...
最新文章
- TX Text Control文字处理教程(13)实现拖放操作
- mysql 渗透及漏洞利用总结
- powerbi learning: look up table and data table
- 命名空间跟作用域是什么关系_乔丹跟科比什么关系?他们是亲密朋友,但并未对外公开...
- 互联网1分钟 |1119
- 写MySQL存储过程实现动态执行SQL
- “被狗啃”的按钮引发的开源社区信任危机
- AAA验证和ciscorescue v4.2 验证服务器的搭建(telnet方式和级别的设置)
- navicat链接mysql
- watch解放你的双手
- 2012.4.17内存相关
- zk框架实现zul的js代码调用服务器java命令
- dos 教程(很全的)
- kettle数据清洗
- 工作也能用 Tinder 配对?一家叫 Palaround 的公司就在做这门生意
- 麦吉尔学和ubc计算机专业,加拿大麦克林9大热门大学专业院校排名出炉
- 安装免费在线客服livezilla系统
- HDU 1224 DFS
- 3元特卖好课AngularJs基础视频教程 大漠穷秋AngularJs基础教程 AngularJs入门教程
- Chrome 常用扩展插件
热门文章
- 分贝、声功率级、声强级和声压级
- PyQt5系列(二)Mac下使用py2app打包python项目
- Linux搭建Git服务器教程
- Android Button常用属性
- C++之获取配置文件值
- 人脸方向学习(四):Face Recognition-SphereFace解读
- java对象复制_Java对象的深层复制与浅层复制
- omni rpc python生成地址_python编辑图形界面单一功能MAC随机地址生成
- Tcl Tutorial 笔记6 ·while
- python 逻辑回归sklearn_python – 分类:使用sklearn进行PCA和逻辑回归