如何在ExtJS 4.1.3的MVC架构下实现JS文件的按需加载？

Question

在企业应用程序中，我们的应用程序中可能有大量的JS文件。一开始加载如此多的文件将花费更多的时间，这与我们应用程序的初始加载时间成正比。

他们是否有按需加载JS文件的机制，即在需要时加载？

谁能告诉我如何在ExtJS中充分利用Ext.require([])？

Answer 1

通过要求您将在每个文件中使用的所有类进行。当你想要创建你的应用程序的生产版本时，这也是非常重要的。也可以参考以下指南中的缩小过程：

http://docs.sencha.com/extjs/4.2.2/#!/guide/getting_started

“ExtJS4附带了一个系统，用于动态加载运行应用程序所需的JavaScript资源。在我们的示例中，Ext.create创建了Ext.container.Viewport的一个实例。当调用Ext.create时，加载器将首先检查是否定义了Ext.container.Viewport。如果未定义，则在实例化视口对象之前，加载器将尝试加载包含Ext.container.Viewport代码的JavaScript文件。在我们的示例中，Viewport.js文件被成功加载，但是加载器检测到文件正在以非最佳的方式加载。由于我们仅在请求Ext.container.Viewport实例时加载Viewport.js文件，因此代码的执行将停止，直到成功加载该文件，从而导致短暂的延迟。如果我们有多个对Ext.create的调用，这种延迟会变得更加复杂，因为应用程序会在请求下一个文件之前等待每个文件的加载。

为了解决这个问题，我们可以在对Ext.application的调用上添加下面一行代码：

Ext.require('Ext.container.Viewport');“

这将确保在应用程序运行之前加载包含Ext.container.Viewport代码的文件。刷新页面时，您应该不会再看到Ext.Loader警告。

Answer 2

但这样做实际上会影响应用程序的性能。ExtJs框架包含数百个文件，单独加载它们会比加载包含所有应用程序的1-2个精简文件耗费更多的时间。

你有没有构建你的应用程序(比如concat和minified)？