Uploaded image for project: 'translate5'
  1. translate5
  2. TRANSLATE-3361

Speed up initial loading of translate5

    XMLWordPrintable

Details

    • Critical
    • New process for building JS files for prod env

    Description

      The intial loading of the JS and CSS files of translate5 need to be speed up by combining and minifying those files.

      Also the usage of a CDN should be evaluated.

       

      1. we can compile all js files needed in one
      2. core and plugins compiling separately should be possible BUT without dynamic loading by ext.js loader. plugins should be loaded manually (be it on php side or js side does not matter much)
      3. we can:
      • pre-compile all combinations of plugins
      • pre-compile most used combinations
      • compile plugins separately and load them on demand by hands (php or js side) (compiling can be done on release basis in pipeline)
      • not compiling them at all and load on demand
      1. ordering can be done effectively by:
      • sencha cmd and right requires directives provided
      • webpack and import/export statements (may take more effort then option above BUT end result will be faster and easier to run)
      1. none script concatenation is possible as it will demand us to have either js files analyser (to read requires statements) or keep files priority list somewhere. This order or priority list may be maintained either manually or build somehow by intercepting in what order ext.loader demands them. Second option will lead to ever changing result list, first will demand maintaining that list by us. both variants are stupid from my perspective

      Compiling with Sencha CMD:
      Pros: # Should take less effort to fix existing files

      1. Removes requires  entries from classes that leads to smaller file size
      2. Native tool for ext.js

      Cons: # Demands to have additional image with java and Sencha

      1. Slow and promts randoms errors from time to time
      2. We still need node for pre- and post-processing of files (babel to downgrade code to ES5 and uglify to minify resulting file)

      Compiling with WebPack:
      Pros: # We already need node image so no additional env

      1. Works faster
      2. Produces ready to use result right away

      Cons:

      1. May take much effort to redo current files
      2. Requires will no longer be needed but should be deleted manually

      In both cases we will need to test compiling when introducing new files to app. some may require add them in requires  where they needed in Sencha case. In webpack case new files should be considered as modules and import/export statements should be used from now on.

      Additionally to import/export statements in ES6 case we'll have to refactor all the classes with import of parent classes for Ext.js core and use them in places of extention and alike

      New idea of how to compile file: get a list of classes loaded by Ext.Loader from browser and use it later on

       

       

      What is still has to be checked:
      1. Can we use module way (import/export) in the current style of development. Basically - can we still use NOT compiled app with new declarations
         ANSWER: yes we can. all that is need needed for that - add `<script type="module"` when loading main app.js file

      2. How errors will look like in RootCause report. For sencha and webpack variants 
       

      Attachments

        Issue Links

          Activity

            People

              sanya@mittagqi.com Sanya Mikhliaiev
              marcmittag Marc Mittag [Administrator]
              Thomas Lauria
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated: