【翻译】动态包加载

原文:《Dynamic Package Loading》

Sencha Cmd一直以来都支持包的概念,大型应用程序可通过包来封装类、样式和资源,然后通过Sencha Cmd将这些包打包到应用程序中。现在,又有了权限的方式(动态)来使用这些包。

如果现在已经使用了包,那会在应用程序的app.json文件中看到类似于以下的“requires”数组:

requires: [
    'dashboard',
    'settings',
    'users'
]

要切换到动态加载,只需要将部分或全部包移动到“users”数组并在“requires”数组添加以下新的包:

requires: [
    'package-loader'
],
uses: [
    'dashboard',
    'settings',
    'users'
]

在做了这些更改后,Sencha Cmd会在生成应用程序时,将应用程序和每个要使用的包生成独立的压缩包。在应用程序加载时,它将只包含自身的代码以及它所要求的包的代码,而不会包含所使用的包的代码。哪些已用包会像JavaScript、CSS或资源文件一样位于应用程序的生成文件夹中。

这样,就可应用程序准备好之后,使用Ext.Package.load()方法来加载这些包。在加载包时,会加载包所需的JavaScript和CSS等文件并会递归加载所需的包。

如果使用了Ext JS路由,则可以执行以下类似操作来加载包:

routes: {
    ':type': {
        before: 'loadPackage',
        action: 'showView'
    }
},

loadPackage: function (type, action) {
    var view = this.getView(),
        pkg = this.getPackageForType(type);

    if (!pkg || Ext.Package.isLoaded(pkg)) {
        action.resume();
    }
    else {
        view.setMasked({
            message: 'Loading Package...'
        });

        Ext.Package.load(pkg).then(function () {
            view.setMasked(null);

            action.resume();
        });
    }
},

使用动态包加载可为你的用户节省时间,他们不再需要等待应用程序的每个字节加,而实际上他们只需要加载大约20%的内容。它还可以为开发人员节省时间,因为Sencha Cmd不再需要加载所有代码来生成“dev”或同时监视所有代码。

有许多新的命令可以用来切换“app build”和“app watch”,以便控制要生成或监视的外部包。这就可让你将生成限制为当前正在使用的包从而缩短生成时间。

在运行sencha应用生成时,可添加--use选项来生成动态包:

sencha app build production --uses

你可能感兴趣的:(ExtJS开发,ExtJs,包,动态包,动态加载,cmd)