从2MB到5KB：一次企业级PLM前端架构的“瘦身革命”

你的企业正在运行SCSAI agent，这是一套功能强大的PLM系统。但你是否遇到过这样的场景：新员工打开系统首页，盯着空白页面等了3-5秒，才看到登录界面；产品经理抱怨“每次刷新都要等半天，效率太低了”；运维团队发现，每次版本升级都要处理一堆莫名其妙的JS冲突——而这一切的根源，可能就藏在你从未注意过的index.html里。

一个被忽略的“性能黑洞”

在传统SCSAI部署中，index.html就像一个杂乱的仓库，堆满了30多个原生JavaScript文件，总大小接近2MB。这些文件包括：

• XML操作类

：XmlDocument.js、XmlUtils.js、Xml.js（处理DOM的“老古董”）

• SOAP通信引擎

：Soap.js、soap_object.js（还在用20年前的协议）

• 加密库

：cryptoJS.js、md5.js、cryptohash.js（三个文件做同一件事）

• UI控件工厂

：ClientControlsFactoryHelper.js（为已废弃的界面服务）

• 弹窗工具

：ModalDialogHelper.js（现代浏览器早就不需要了）

这些文件加起来，浏览器需要依次下载、解析、执行，每个步骤都会阻塞页面渲染。更糟糕的是，它们之间还有复杂的依赖关系——必须先加载mscorlib.js，再加载IOM.ScriptSharp.debug.js，然后是sciot_object.js……任何一个环节出错，整个系统都可能崩溃。

但最讽刺的是：这些文件中的绝大多数，你的前端应用根本用不上。

技术解耦：从“全家桶”到“点外卖”

现代前端架构讲究“按需加载”。如果你的Vue应用通过RESTful API与后端通信，为什么还要让浏览器加载一套完整的SOAP客户端？这就像明明用手机点外卖，却非要囤一整套厨房设备。

核心思路：直连模式

让我们看看优化后的数据流：

Vue组件（如客户管理页面）   → 调用 window._bomService._SCSAIApiRequest('ApplyItem', aml)     → fetch('/SCSAI-api/', { headers: { AUTHUSER, AUTHPASSWORD, DATABASE } })       → Node.js代理服务器         → 请求SCSAI agentServer.aspx           → XML/JSON响应             → 解析返回给Vue 

这个路径完全不经过任何SCSAI浏览器端JS文件。你的Vue前端和SCSAIBomService（index.js）通过fetch() + AuthHeaders直连Node.js代理，直接与SCSAI服务器对话。

替换策略：轻量存根

我们不是简单地删除文件，而是用一个5KB的“存根文件”（src/SCSAI-shim.js）替代了原来的2MB“全家桶”。这个存根做了什么？

1. 1. 保留接口，清空实现

：对于IomFactory、Sciot等对象，只保留空壳，不加载实际代码

1. 2. 内联必要功能

：将MD5加密等关键工具函数直接写进存根

1. 3. 消除全局污染

：原来40个文件会往window对象上挂载大量变量，现在只保留必需的

这就好比把一整套工具箱换成一个智能遥控器——你不需要知道螺丝刀怎么用，只需要按按钮。

优化效果：数字会说话

| 指标 | 优化前 | 优化后 | 提升幅度 | |------|--------|--------|----------| | HTML脚本标签数 | 40个 | 2个 | 95% | | 浏览器加载体积 | ~2MB | ~5KB | 99.75% | | Vite构建警告 | 40条 | 1条 | 97.5% | | 首屏加载时间 | 额外500-1500ms阻塞 | 几乎为零 | 消除 |

更重要的是可维护性的提升。原来你需要在30多个散落文件中找bug，现在所有“存根逻辑”统一在src/SCSAI-shim.js里。版本升级时，再也不用担心某个SCSAI原生JS文件不兼容。

哪些文件可以“退休”了？

经过逐行审计，我们发现了大量“僵尸文件”：

完全未使用的（可放心删除）：

• XmlHttpRequestManagerCommon.js

、XmlDocument.js、XmlDocumentCommon.js（XML操作，已过时）

• enumerations.js

、client_cache.js（枚举和缓存，从未被引用）

• ModalDialogHelper.js

、Utils.js（弹窗和工具函数，Vue已替代）

• core/Soap.js

、soap_object.js（SOAP通信，已替换为REST）

• WebFile.js

、BrowserInfo.js、BrowserUtils.js（浏览器检测，现代框架自带）

• 整个

SCSAI/ai/、SCSAI/Classes/、SCSAI/CultureInfo/目录（AI集成、类视图、国际化资源，均未使用）

建议保留但可移除的：

• utils/md5.js

（MD5已内联进shim）

• utils/cache.js

（缓存逻辑由index.js内置实现）

• utils/bom-exporter.js

（导出功能已在服务端实现）

从“能用”到“好用”：BossAgents能做什么

这次优化揭示了一个普遍问题：企业级系统往往背负着沉重的历史包袱。SCSAI agent是一个优秀的PLM平台，但它的前端架构还停留在“单页应用+SOAP”时代。当你想用Vue、React等现代框架重构时，发现要处理一堆“祖宗代码”。

BossAgents（左帮右臂）智能体公司专治这类“技术债务”。我们不只是删文件、改配置，而是：

1. 1. 架构重构

：从“浏览器直接调用SCSAI”到“前后端分离+代理层”，让前端轻装上阵

1. 2. 智能体集成

：将SCSAI的BOM服务、工作流引擎封装为可调用的API智能体

1. 3. 渐进式迁移

：不要求一次性全改，从“移除无用文件”开始，逐步替换核心模块

1. 4. 性能监控

：通过智能体持续监控加载性能，自动识别新的“性能黑洞”

最终效果：你的SCSAI系统首屏加载时间从5秒降到1秒以内，开发团队从“修bug”变成“做功能”，业务部门再也不用对着转圈圈的白屏干着急。

结语：轻装上阵，才能跑得快

2MB到5KB，不只是数字的缩小，更是架构思维的转变。当你的前端不再需要为“可能用到的功能”提前加载所有代码，当你的开发团队不再被历史遗留问题拖累，你就能把精力放在真正重要的事情上——让PLM系统更好地服务业务，而不是让业务迁就系统的性能。

BossAgents（左帮右臂）智能体公司，用智能体技术帮你“断舍离”，让企业级系统也能拥有互联网级的用户体验。