Dojo has a great build process which allows you to create a optimized and minimized files for the client side (and more!).

In a production environment, this greatly improves performance.

However, building the code after every change will slow development significantly.

Since Dojo can load the required modules dynamically, you can load the source files and work with them directly, and maintain your profile file as you work. Running a build at the end of each development session will help to ensure the code and profile stay in sync.

admin.base.html.twig

This template provides the foundation page layout for all admin pages. If the application is running in a dev environment, it includes a page_footer_script, but in production, it includes dojo.js

{% if app.environment == 'dev' %}
    {% include 'admin/parts/page_footer_script.html.twig' %}
{% else %}
    <script data-dojo-config="async:1" src="/release/dojo/dojo.js"></script>
{% endif %}

{% block javascripts %}
{% endblock %}

{% if omit_menu is not defined %}
    <script>
        require([
            "app/admin/menu",
            "dojo/domReady!"
        ], function (menu) {
            menu.run();
        });
    </script>
{% endif %}

page_footer_script.html.twig

Used only in the dev environment

<script>
    var dojoConfig = {
        async: true,
        baseUrl: '/release',
        paths: {"lib": "/app/lib",
            "nls": "/app/nls"},
        packages: [
            {"name": 'app', "location": '/app'},
            'dojo',
            'dijit',
            'dojox',
            'dgrid',
            'dstore',
            'put-selector',
            'xstyle'
        ],
        selectorEngine: 'lite',
        tlmSiblingOfDojo: false,
        has: {
            "dojo-trace-api": false
        }
    };
</script>
<script data-dojo-config="async:1" src="/vendor/dojo/dojo/dojo.js"></script>

example-page.html.twig

Each page template has a javascripts block which includes the require call to bring in the client side code.

{% block javascripts %}
    <script>
        require(["app/admin/asset/brand"], function (brand) {
            brand.run();
        });
    </script>
{% endblock %}