本文共 3207 字，大约阅读时间需要 10 分钟。

Microloader - 微加载器。

数据驱动的动态加载JavaScript和CSS。

The　Manifest　－清单

Microloader包括的清单：

app.json 用来配置应用的细节。

Ext.manifest

启动应用的时候，会根据app.json加载应用清单。 Loading app json manifest

使用Microloader

默认状况，这个代码会被构建程序自动替代。

在开发的时候可以用来加载应用。 data-app是为了防止数据冲突。

默认配置和自定义

app.json 由cmd命令产生。

indexHtmlPath -

相对与app.json文件的html文件，除了html,也可以是PHP， JSP和ASP等

“indexHtmlPath”: “…/page.jsp”

framework - 框架名字： ext 或者是 touch

“framework”: “ext”

theme - 页面主题名字

“theme”: “ext-theme-crisp”

toolkit-工具包名： “toolkit”: “classic”

js

应用的入口，默认如下：

“js”: [{ “path”: “app.js”, “bundle”: true }]

“js”: [{

“path”: “library.js”, “includeInBundle”: true },{ “path”: “app.js”, “bundle”: true }] bundle配置为使用build结果替换入口，也可以添加其他的文件。 额外添加的文件可以使用一些属性设置构建的行为，上面的例子library.js会包含在构建输出中，并从运行时清单中移出。

如果不配置“includeInBundle”，则会把“library.js”驻留在您的app文件夹中，然后将其复制到构建输出文件夹。 该条目将保留在清单中，并由Microloader单独加载。

“remote”: true 属性可以用来是设定Microloader的条目来加载（而不是由构建过程复制）。

虽然可以使用这种方式添加依赖，更常见的是使用requires设置。

css

“css”: [{

“path”: “boostrap.css”, “bootstrap”: true }],

bootstrap : 表示该条目用于开发，但应从构建输出中删除。

构建会将编译的CSS文件将附加到生成的清单的“css”数组中。

bootstrap.css的内容如下： @import ‘build/development/Nplm/classic/resources/Nplm-all.css’; 这个文件是构建出来的。

remote属性不设置：则会将其复制到构建输出目录。

requires

用来处理需要的包。在运行cmd时会自动下载而外的包到项目中。

包也可以在“package.json”中包含require。

output

控制构建的输出。

“output”: {

“page”: { “path”: “…/page.jsp”, “enable”: false }, appCache: { “enable”: false }, “manifest”: { “name”: “bootstrap.js” } }

上面设置enable为false, 意思是这个是最终页面，不会从indexHtmlPage复制。

由于没有生成页面，因此Microloader脚本标记将包含与“bootstrap.js”相同的“src”值。 上面的“manifest”选项指示Sencha Cmd使用相同的名称生成构建的Microloader。 这是服务器端模板环境（如JSP或ASP）的常见需求，也是其他需求。

Application Cache

应用程序缓存是一个清单，用于确定浏览器应存储哪些资产以进行脱机访问。 要启用此功能，只需在输出对象中切换appCache属性的enable标志即可。 例如：

“output”: { “page”: “index.html”, “appCache”: { “enable”: true } } 此处显示的appCache属性用于确定构建过程是否将生成Application Cache Manifest文件。 如果将其设置为true，则将从app.json中的顶级appCache配置对象生成清单。看起来类似： “appCache”: { “cache”: [ “index.html” ], “network”: [ “*” ], “fallback”: [] }

Local Storage Cache

本地存储缓存系统是一个独立的脱机缓存系统，来自Application Cache中内置的浏览器。 资产通过唯一密钥存储在本地存储中，在引导期间，在尝试任何远程加载之前，将首先请求这些资产。 这样可以非常快速地加载应用程序，而无需连接互联网。 此缓存还允许对资产进行增量修补，这意味着只会通过网络加载资产（css或js）的已更改位。 然后，该文件将在本地存储中打补丁并传递给用户。 通过更新权限为每个资产启用此缓存。 这可以设置为“完整”或“增量”。 下面是启用了本地存储缓存的JS和CSS资产的示例。 // app.js will be delta patched on updates "js": [ { "path": "app.js", "bundle": true, "update": "delta" } ],

// app.css will be fully downloaded on updates"css": [    {        "path": "app.css",        "update": "full"    }]

在资产上启用本地存储缓存后，必须全局启用缓存配置“app.json”。 通常在开发构建期间，一个人会希望此设置为false，而在生产版本中，这将设置为true。

"cache": {    "enable": false}

还可以配置增量的路径和生成。 当deltas属性设置为truthy值时，使用本地存储缓存的所有资产都将在构建“deltas”文件夹中生成detas。 如果将增量设置为字符串，则该值将用作将保存所有修补程序文件的文件夹名称。 如果enable设置为false，则delta切换将不起作用。

"cache": {    "enable": true,    "deltas": true}

Application Cache和Local Storage Cache都会立即加载文件以供离线访问。 由于此更新的文件不会加载到用户当前的应用程序体验中。 一旦Microloader检测到并加载了新的应用程序缓存或本地存储文件，它将调度一个全局事件，允许您提示用户重新加载应用程序以获取最新更新。 您可以通过将以下代码添加到应用程序来侦听此事件：

Ext.application({name: 'MyApp',mainView: 'MyMainView',onAppUpdate: function () {    Ext.Msg.confirm('Application Update', 'This application has an update, reload?',        function (choice) {            if (choice === 'yes') {                window.location.reload();            }        }    );}

转载地址：https://oscar.blog.csdn.net/article/details/89250071 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！