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之后，原来的方式已经不能复现实际场景了。要完整复现的话，需要使用如下的方式：

1. 启动工作台的前端、启动前端框架、启动领域前端扩展、启动Node服务

2. 修改工作台中的配置，或添加新菜单，使其能指向本地的前端框架、本地的前端扩展

3. 开始调试

这种方式需要启动的项目过多，步骤繁琐且内存消耗大，影响开发调试的效率。

新的调试思路

新的调试是使用网络代理的方式，将线上环境(daily/test/pre/prod/sandbox/iter等均可)中的一部分资源调用转向本地。

这中间的关键点，就是将线上的资源重定向到本地。主要有两种方式：

1. 浏览器级别的转发，需要浏览器插件(如Resource Override)，仅主流浏览器(Chrome、Firefox及新版Edge、Opera、QQ、搜狗等基于Chrome内核的浏览器)支持。

2. 系统级别的转发，需要配置系统级网络抓包调试工具(如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不仅能转发前端资源，也能转发后端接口。

一个正常的后端接口请求，一般是如下的流程：

转发有两个方式：

1. 拦截“浏览器 -> 统一Node”的过程，转向本地Node服务或领域后台

2. 拦截“统一Node -> 领域后台”的过程，转向本地领域后台

因为统一Node在远程服务器上，除非本地调试的后端能用端口映射的方式在远程暴露出端口，否则网络上是不通的。所以这里没有选择这种方式，而是用了在浏览器 -> 统一Node 的过程进行拦截的方式。

统一Node中业务比较简单，除了 POST /meta 等为数不多的接口是对后端接口进行了再加工，其它的大多是 /uniform/ 开头的纯转发接口。

一般来说，调试的时候只需要配置 uniform 接口的转发即可。

这个转发也有两种方式：

1. 本地启动一份统一Node的代码，并将 /uniform/* 的接口转发到本地。

2. 本地不启动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端，即使用方案一。到时候会将相关证书等内置在工程中。