/
faq-optimization.html
136 lines (111 loc) · 6 KB
/
faq-optimization.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div id="directory" class="section">
<h1>FAQ: RequireJS Optimizations</h1>
<ul class="index mono">
<li class="hbox"><a href="#usage">How do I use the Optimization Tool?</a><span class="spacer boxFlex"></span><span class="sect">§ 1</span></li>
<li class="hbox"><a href="#priority">How can I download all script dependencies in parallel?</a><span class="spacer boxFlex"></span><span class="sect">§ 2</span></li>
</ul>
</div>
<div class="section">
<h2><a name="usage">How do I use the Optimization Tool?</a><span class="sectionMark">§ 1</span></h2>
<p>See the <a href="optimization.html">general optimization page</a> for basic set-up. Also see the <a href="jquery.html">jQuery doc page</a> for a good way to set up your project, even if you are not using jQuery.</p>
</div>
<div class="section">
<h2><a name="priority">How can I download all script dependencies in parallel?</a><span class="sectionMark">§ 2</span></h2>
<p>Using <a href="">require()</a> and <a href="api.html#define">define()</a> to define script modules and dependencies is an efficient syntax for indicating related code. However, for deploying code in the browser, it may not lead to the best overall performance. To find nested dependencies, a script has to be fetched, then a require() or define() call in that script might trigger other script downloads.</p>
<p>The <a href="optimization.html">Optimization Tool</a> allows a quick way to <a href="optimization.html#onejs">build all your scripts into one file</a>, so only one script download is needed for your page.</p>
<p>However, if you have many pages in your web app, it may make more sense to optimize your scripts into a set of two or three optimized layers:</p>
<ul>
<li>One layer for common toolkit code, like jQuery, Dojo, Prototype or MooTools (toolkit.js). It may make sense to roll this layer in with the appcommon.js layer.</li>
<li>One layer for common web app code (appcommon.js)</li>
<li>One layer for page-specific code (page.js)</li>
</ul>
<p>Ideally you could do that layering after you finish development, and tune those layers for optimal, parallel download of the files, without having to change all your scripts.</p>
<p>This is possible with RequireJS:</p>
<ul>
<li><a href="optimization.html#wholeproject">Optimize your project</a> to create the three script layers.</li>
<li>Use the <a href="api.html#config"><strong>priority</strong> config value</a> to pass the list of layers to priority download to the top-level require() call in the HTML file(s).</li>
</ul>
<p>Script modules/files specified in the config's priority array will be downloaded in parallel before any other script dependencies are traced. <b>Note:</b> resources loaded by loader plugins (like 'text!template.html') <b>cannot</b> be specified in the priority array: the priority mechanism only works with regular JavaScript resources.</p>
<p>This example builds on the <a href="download.html#samplejquery">sample jQuery project</a> to demonstrate the approach:</p>
<p>Assume the project has the following structure:</p>
<ul>
<li>app.build.js (the build profile used by optimization tool)</li>
<li>webapp
<ul>
<li>page1.html</li>
<li>page2.html</li>
<li>scripts
<ul>
<li>require.js (the loader)</li>
<li>appcommon.js (used on both pages, "appcommon")</li>
<li>jquery.js (used on both pages, "appcommon")</li>
<li>page1.js (lists the dependencies for page 1)</li>
<li>page2.js (lists the dependencies for page 2)</li>
<li>object.js (used on both pages, "appcommon")</li>
<li>event.js (used on both pages, "appcommon")</li>
<li>widget.js (used on both pages, "appcommon")</li>
<li>Dialog.js (used on both pages, "appcommon")</li>
<li>Slider.js (used only on page 2)</li>
<li>Tabs.js (used only on page 1)</li>
</ul></li>
</ul></li>
<li>webapp-build
<ul>
<li>this directory will hold the optimized files</li>
</ul></li>
</ul>
<p>page1.html might look like this:</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script src="scripts/require.js"></script>
<script>
require.config({
priority: ["appcommon", "page1"]
});
</script>
</head>
<body>
</body>
</html>
</code></pre>
<p>with appcommon.js looking like this:</p>
<pre><code>define(["jquery", "object", "event", "widget", "Dialog"],
function () {
//Just an empty function, this is a place holder
//module that will be optimized to include the
//common depenendencies listed in this module's dependency array.
});
</code></pre>
<p>and page1.js looking like this:</p>
<pre><code>define([ "jquery", "object", "event", "widget", "Dialog", "Tabs"],
function ($, object, event, widget, Dialog, Tabs) {
...
});
</code></pre>
<p>page2.html and page2.js would look similar, except referencing "page2" instead of "page1" and using "Slider" instead of "Tabs" in page2.js.</p>
<p>The build profile, <strong>app.build.js</strong> would look like this:</p>
<pre><code>({
appDir: "webapp",
baseUrl: "scripts",
dir: "webapp-build",
optimize: "none",
modules: [
{
name: "appcommon"
},
{
name: "page1",
exclude: ["appcommon"]
},
{
name: "page2",
exclude: ["appcommon"]
}
]
})
</code></pre>
<p>Once the build is run, it will generate the contents of <strong>webapp-build</strong> that look similar to <strong>webapp</strong>, except that the contents are optimized. appcommon.js will contain the common modules, and page1.js will have all the modules page1 needs, excluding appcommon's modules and their nested dependencies.</p>
<p>The <strong>priority</strong> config value tells RequireJS to load appcommon.js and page1.js in parallel and wait before both are loaded before tracing dependencies. With those two files, along with require.js, all the dependencies in the page will be loaded with three requests, with the appcommon.js and page1.js scripts being loaded asynchronously and in parallel.</p>
</div>