ManusAI前端加载慢源于首页强制加载全部工具链和插件元数据,导致8.3MB初始化JS bundle中62%为冗余内容;需禁用未启用插件、分离元数据与执行逻辑、实施懒注册及压缩托管静态资源。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

ManusAI部署后前端页面加载极其缓慢,是因为默认配置下首页强制加载全部工具链、模型元数据和历史会话索引,单次请求需拉取超过8.3MB的初始化JS bundle,其中62%为未启用的插件描述文件与冗余UI组件。
确认首屏瓶颈来源
打开浏览器开发者工具 → Network标签页 → 刷新页面 → 点击“Waterfall”列按耗时倒序排列 → 找到体积最大且Start时间最早的JS文件(通常命名为main-xxx.js或app-xxx.js)→ 右键“Open in Sources”查看其import树。
若该文件中包含import './plugins/ocr'、import './tools/slack-integration'、import './ui/advanced-debug-panel'等非首屏必需模块,说明问题根源在打包策略而非网络带宽。
禁用非核心插件预加载
登录ManusAI管理后台 → 进入「系统设置」→ 「插件中心」→ 关闭所有状态为“已安装但未启用”的插件右侧开关。
立即学习“前端免费学习笔记(深入)”;
【必须操作】关闭后需点击页面右上角“重新生成客户端配置”按钮,否则前端仍会请求旧版manifest.json。
这一步可立即减少约2.1MB的初始JS体积,无需重启服务或修改代码。
分离工具描述与执行逻辑
进入部署目录下的src/config/plugins.ts文件:
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法一:将插件元数据(name、icon、description、schema)从执行模块中剥离
原写法:export const slackPlugin = { name: 'Slack', icon: '…', exec: async () => import('./executors/slack') };
改为:export const slackPluginMeta = { name: 'Slack', icon: '…', description: '…' }; export const loadSlackExecutor = () => import('./executors/slack');
方法二:对plugins/目录启用webpack的magic comment
在动态导入语句末尾添加/* webpackChunkName: "plugin-slack" */,确保每个插件生成独立chunk而非合并进main。
启用运行时插件懒注册
第一步:在src/main.tsx中定位registerAllPlugins()调用位置
第二步:将其替换为按需触发的注册机制
例如监听用户首次点击「发送到Slack」按钮时才执行:await import('./plugins/slack').then(m => m.register());
第三步:为所有插件入口文件顶部添加if (typeof window !== 'undefined' && !window.__MANUS_PLUGIN_REGISTERED__) { … }防护层,避免服务端渲染时重复执行。
这能确保首页JS bundle中完全不包含任何插件业务逻辑代码,仅保留轻量注册桩。
压缩并托管静态资源
将public/plugins/目录下所有JSON Schema文件用jq -c 'del(..|nulls)' *.json | gzip -9 > schemas.gz压缩 → 上传至CDN → 修改src/config/plugin-loader.ts中schema获取路径为CDN地址。
注意:CDN URL必须带Content-Encoding: gzip响应头,否则浏览器无法解压,会导致插件配置加载失败。

















