In our recent post on dgrid and Dojo Nano, we showed a technique of using nested require statements in order to make use of optimized layers using the Dojo build system. As a refresher, a layer is Dojo’s terminology for a file that combines many JavaScript resources into a single file. This improves the performance of your web application by minimizing the number of HTTP requests.
The technique we originally presented was a quick and simple approach:
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require(['dgrid/dgrid'], function () {
require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection",
"dgrid/Keyboard", "dojo/_base/declare", "dgrid/test/data/perf",
"dojo/domReady!"],
function(List, Grid, Selection, Keyboard, declare, testPerfStore){
//...
While this works, it’s not ideal because you will need to modify your source when switching between development and production environments which is suboptimal. While you could of course fix this with PHP or some other server-side approach for your initial require statement, there are many simple alternative techniques that you can make directly to your markup. Here we explore five other approaches.