翻译动态包加载

Posted 2022-12-02 上将军

原文：《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