ExtJS 7 如何自定义modern.jsonp清单文件以仅引入必要依赖？

默认的modern.jsonp、classic.json里的loadOrder节点所有条目存在强依赖关联，idx是文件唯一标识，requires是该文件依赖的其他文件id，手动删除条目会直接破坏依赖链，导致运行时报错，因此不推荐手动修改。

方案1：使用Sencha Cmd生成自定义manifest（推荐，无需全量编译） #

这个方案只需要跑一行命令生成清单，不会改动你的项目代码，也不需要做全量打包，符合普通静态网站的需求：

• 第一步：准备依赖声明入口文件，新建一个ext-requires.js，把你项目中用到的所有Ext类全部列在Ext.require中，示例：

Ext.require([
  // 仅举例，替换为你实际用到的所有Ext组件、工具类
  'Ext.grid.Grid',
  'Ext.form.Panel',
  'Ext.data.Store',
  'Ext.field.Text'
]);

• 第二步：执行Sencha Cmd的manifest生成命令，替换命令中的路径为你本地的实际路径：
  sencha manifest -sdk /你的ExtJS7根目录路径 -toolkit modern -entry /你的项目路径/ext-requires.js -output /你的项目路径/custom-modern.jsonp
• 第三步：替换原来的默认manifest加载地址为新生成的custom-modern.jsonp即可，生成的清单已经自动梳理好了所有依赖链，没有多余的未使用文件条目。

方案2：直接使用官方预构建精简包（无需命令行工具） #

如果不想安装Sencha Cmd，可以直接使用ExtJS官方提供的分块预构建包，不需要维护manifest文件：

• 首先引入核心基础包：ext/modern/modern-core.js + 对应的主题css
• 按照依赖顺序引入你需要的组件包，比如用到Grid就引入ext/modern/grid/Grid.js，用到图表就引入ext/packages/charts/modern/charts.js
  注意：组件的依赖顺序可以参考官方文档的组件依赖说明，基础类必须在组件类之前引入

注意事项 #

• 生成自定义manifest后如果修改了项目用到的Ext组件，只需要更新ext-requires.js的声明，重新执行生成命令即可
• 生成的manifest中的paths节点可以手动修改，适配你部署的ExtJS静态资源路径，loadOrder节点内容不要手动修改

内容的提问来源于stack exchange，提问作者webpuper