缩小 ExtJs

Posted 2023-02-26

【中文标题】缩小 ExtJs

【英文标题】：Minifying ExtJs

【发布时间】：2014-03-20 13:56:58

【问题描述】：

我们有一个 extjs 应用程序，其中我们布置的结构与 Sencha 推荐的结构不完全匹配。在我们的结构中，我们没有 app.js，但我们有一个 js，其中提到了自动加载和启动功能，示例如下所示以及文件夹结构。

我们正在寻找的是缩小 admin 文件夹中的所有 JS 文件并创建一个用于生产的 JS，我们尝试查看 Sencha CMD 但没有运气。有人可以指出我们将应用程序缩小以供生产使用的确切步骤。

Ext.Loader.setConfig(
enabled: true,
paths: 
    'Admin': '../../script/js/ace/admin',
    'Ext.ux': '../../script/js/ext4/ux'

);

Ext.require('Admin.view.Administration');

Ext.application(
   name: 'Admin',
   appFolder: '../../script/js/ace/admin',
   launch: function() 
   
     Ext.QuickTips.init();
     var me = this;
     Ext.create('Admin.view.Administration', 
        renderTo: 'contentPanel'
     );
   
);

我们通过生成 JSB3 文件来尝试 Cmd，我知道它在 4.2.1 中已被弃用，但我们认为这是唯一的选择。 我们尝试了以下命令，但没有生成 jsb3 文件

 sencha build admin.jsb3 <path to the admin js folder>

在此先感谢，任何指针都非常感谢。

我在 Sencha 论坛上发布了这个，但我期待一个比他们提供的更简单的选项。

---

编辑

我们有多个应用程序，在大多数情况下，我们会尝试使用其他应用程序文件夹中的 js。 例如，在下图中，我们有实用程序和管理应用程序，从实用程序应用程序我们使用 SourceStore，并且自动加载器定义如下以访问所需的

 Ext.Loader.setConfig(
  enabled: true,
  paths: 
    'Admin': '../../script/js/ace/admin',
    'Utilities': '../../script/js/ace/utilities',
    'Ext.ux': '../../script/js/ext4/ux'
  
);

【问题讨论】：

你的后端是什么：它是带有 servlet 容器的 Java 吗？

是的，它带有 servlet 的 java

我推荐你使用jawr。特别是如果你不使用 Ext 的 loader，你可以构建 bundles（bundle=一组缩小的 JS 文件）并且可以单独请求它们。

jawr 似乎正是我所看到的，但由于结构不同，我有不同的文件夹并且它们是相互依赖的，我编辑了帖子以添加解释这一点的图像。下颚如何处理

我给了你一个答案，如果你有其他的快速问题，请在那里提问。基本上，在页面中包含所需的包之后，您的 Ext.loader 不应尝试加载任何文件，因为所有内容都应该已经加载。

【参考方案1】：

如果你让 Sencha CMD 为你生成一个骨架应用程序，然后将你现有的代码与它合并，那真的很容易。

否则你也可以试试 Sencha 的旧 JSBuilder。

【参考方案2】：

我强烈建议使用 grunt_sencha_dependencies 插件检查 grunt。 Here's a tutorial.

在高层次上，您要做的是： 1) 运行 sencha_dependencies 插件生成依赖列表。 2) 将输出传递给 uglify 插件以连接和缩小 javascript。 3) 使用 grunt 的复制任务替换以使用缩小的输出更新您的 index.html。

edit：我已经处理过 Sencha CMD，这很糟糕。我不希望它发生在我最大的敌人身上。 Grunt 更简单。

【讨论】：

谢谢迈克，我会尝试评估这个。你说得对，煎茶 CMD 很痛苦

【参考方案3】：

我建议您使用JAWR。基本上，您在 jawr.properties 文件中定义您的捆绑包，并说明哪个文件或文件夹属于哪个捆绑包。捆绑包实际上是一堆 JS 文件，它们被缩小为另一个单独的文件，并且可以在您的 servlet/JSP 文件中单独请求。此外，您可以定义捆绑包之间的依赖关系（默认情况下它们是独立的），这样当您包含一个捆绑包时，其他捆绑包会自动包含在您的页面中。要包含一个包，您可以在 servlet 中使用特殊标记 <jwr>。此外，您还可以开启调试模式，以便您在开发时可以调试您的代码。

它是如何工作的：您将一个 servlet 添加到您的 web.xml 文件中以在启动时加载，这也是生成这些包的阶段（对您来说是透明的）。

一些提示：

查看this tutorial 因为在 ExtJS 中文件的使用顺序很重要，所以在定义包时应该考虑它。

【参考方案4】：

如果你愿意再试一次 Sencha CMD，你可以尝试使用 sencha compile 命令。

sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js

--classpath 是您要包含的文件夹。

--yui 是压缩器

--output-file 是 javascript 输出的名称。

我建议阅读 sencha cmd 指南。它们可能有点紧张，但 sencha 命令包含了很多工具，它可能值得拥有：http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html