Our company has been using newer versions of the Dojo framework, which have progressed to an AMD-based loader format. I'm currently trying to find logical ways to separate layer files, taking a module and all its dependencies, and wrapping them all into single minified files. My goals are generally as follows:
- Minimize the number of separate requests made per-page
- When possible, make use of cache so that large modules that have already been used are re-retrieved.
Our app consists of many hundreds of pages and dialogs, much of which have their own custom logic and related scripts.
I'm starting to run into more and more complex issues in terms of finding the right way to construct layer files for the best performance. Just recently, I ran into the following type of scenario:
A depends on B, depends on C, depends on D ...etc... depends on Z.
A1 depends on D (which depends on ... Z)
A2 depends on L (which depends on ... Z)
The scenario is mostly just an example - I don't have 24 dependencies in a straight tree. But under our previous method of simply declaring all objects globally under a namespace, this would be a simple matter of minifying everything to one layer file that's included on relevant pages. As it stands now, I'm not sure what I'd gain by making D its own layer, or A, or L. Just to avoid loading the same code twice, we'd be separating it into about 3 or 4 requests. One troublesome fact is the way that the page's script will always immediately put out new script requests for anything in its "require()" block that it hasn't cached just yet. Moreover, it's become very complicated just to comprehend and discuss.