从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. 保留接口，清空实现：对于IomFactory、Sciot等对象，只保留空壳，不加载实际代码
2. 内联必要功能：将MD5加密等关键工具函数直接写进存根
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. 架构重构：从“浏览器直接调用SCSAI”到“前后端分离+代理层”，让前端轻装上阵
2. 智能体集成：将SCSAI的BOM服务、工作流引擎封装为可调用的API智能体
3. 渐进式迁移：不要求一次性全改，从“移除无用文件”开始，逐步替换核心模块
4. 性能监控：通过智能体持续监控加载性能，自动识别新的“性能黑洞”

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

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

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

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