1. #1
    Sencha Premium Member twasink's Avatar
    Join Date
    Oct 2012
    Location
    Brisbane, Australia
    Posts
    100
    Vote Rating
    9
    twasink will become famous soon enough

      0  

    Default [4.2.0-489] Putitng generated Javascript at the bottom of the page.

    [4.2.0-489] Putitng generated Javascript at the bottom of the page.


    One of the standard recommended 'best practices' for developing JavaScript-heavy pages is to put Javascript links at the bottom of the page, whilst leaving CSS links in the <head> section. (http://developer.yahoo.com/performan...html#js_bottom)

    However, with Ext 4.20 RC, you have two generated files - the generated CSS and the generated Javascript. And the build tool puts the calls in the same place of the page. This means you need to load the javascript in the <head>.

    Is there anyway to get an index page that looks something like this:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>CssTest</title>
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
    </head>
    <body>
      <!-- <x-compile> -->
          <script src="app/app.js"></script>
      <!-- </x-compile> -->
      
    </body>
    </html>
    to produce a generated output that looks like this:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>CssTest</title>
    <link rel="stylesheet" href="resources/CssTest-all.css"/>
    </head>
    <body>
    <script type="text/javascript" src="all-classes.js"></script>
      
    </body>
    </html>
    instead of like this:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>CssTest</title>
    </head>
    <body>
    <link rel="stylesheet" href="resources/CssTest-all.css"/>
    <script type="text/javascript" src="all-classes.js"></script>
      
    </body>
    </html>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,532
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    No, this is not possible besides doing it manually after the build. With all the apps I've made I don't see any performance differences as the browser can download 4 files at once. So if you have the app CSS, Ext JS core JS file and app JS file that means it should be able to download the 3 files at once with no issues.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member twasink's Avatar
    Join Date
    Oct 2012
    Location
    Brisbane, Australia
    Posts
    100
    Vote Rating
    9
    twasink will become famous soon enough

      0  

    Default


    Well, in our case we've got a couple of extra files that we download, and the all-classes.js file is big enough that it has a noticeable delay (2-4 seconds, when served from an AWS server). So putting it at the end of the page and having a 'loading' animation is worth it for us, especially as we have more delays once we get the javascript files (we do AJAX calls on load to bring down dynamic configuration data before launching the UI).

    If anyone else has this issue, here's the Ant tasks I added to the build.xml to move the CSS up to the top of the page:

    Code:
        <target name="-after-page" depends="fix_css_location" />
        <target name="fix_css_location" description="Move the CSS link from the bottom of the page to the top">
          <replace file="${build.page.file}">
            <replaceToken expandProperties="true"><![CDATA[<link rel="stylesheet" href="resources/${app.name}-all.css"/>]]></replaceToken>
            <replaceValue></replaceValue>
          </replace>
          <replace file="${build.page.file}">
            <replaceToken><![CDATA[<!-- REPLACE WITH CSS LINK AFTER BUILD -->]]></replaceToken>
            <replaceValue expandProperties="true"><![CDATA[<link rel="stylesheet" href="resources/${app.name}-all.css"/>]]></replaceValue>
          </replace>
        </target>

Thread Participants: 1