CODEWITHSUNDEEP
extjs
Tejas
Tejas

Reputation: 902

Split Extjs's generated app.js build file into extjs specific code & our application code

I want to split the app.js file generated by Extjs into app specific code & extjs specific code.The intention is to reduce the size of app.js & app will load much faster. I have read some links, but as I am new to extjs I want some ready code(if available) like in some .xml files etc.

Upvotes: 0

Views: 656

Answers (2)

Timz
Timz

Reputation: 461

Beside of what Alexander wrote, you can split the application and the framework code using the "output" definition. In the following example this is done for the production build:

"production":{
   "output":{
      // Split the framework from the application.
      "framework":{
         "enable":true
      }
   },
   "compressor":{
      // Enable compressor (other options: closure, strip)
      "type": "yui"
   }
}

Additionally the compression is activated (here: yui). The "Sencha Compiler Reference" and the documentation about the "Resource Management" could also help you: https://docs.sencha.com/cmd/guides/advanced_cmd/cmd_compiler_reference.html https://docs.sencha.com/cmd/guides/resource_management.html

Upvotes: 1

Alexander
Alexander

Reputation: 20224

The app won't load faster because the app still requires the ExtJS code and your own code before it can do anything.

Furthermore, gzip compression works better if everything is in one file, so if you have enabled compression of static contents, your two-file app will load slower than before. And if you haven't, you definitely should, it will cut loading time in half or even less.

That said, you can always include more javascript files using multiple <script> tags:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Verwarming HollandVilla</title>
    <script type="text/javascript" src="ext-modern-all.js"></script>
    <script type="text/javascript" src="verwarming.js"></script>

But you cannot split the compiled app.js into a part which only contains your code and another part which only contains ExtJS code, because in app.js both domains are mixed and mangled.

But you can still split the app.js before any occurrence of Ext.define()., and then check that both javascript files are still syntactically valid. If yes, you didn't change anything semantically, so the app should work as before.

If you really get the loading time down, please post your results, because I have not yet found anyone who verified the expected results by experiment.

Upvotes: 1

Related Questions