when using require.js and creating a single file u

问题:

when using require.js and creating a single file using r.js do we still get the benefit of load time?

In other words, my final single file that r.js produces is over 2MB in size... however in my code I take full advantage of require.js, in other words, I only load required modules when I need them in code.

So the question is, does require js have to read the whole 2MB file before it can start working? I mean, how would it be able only read a portion of the 2MB file... :/

and so producing a single file out of r.js may beat the purpose of quick load times...

no?

Thanks,

Sean.

回答1:

Why yes, it is possible to misuse r.js and deploy your application in a way that harms performance. There are three broad scenarios for deployment:

• Each module is its own file. This is what happens when r.js is not used.

• A single bundle contains all modules of the application. Simple applications often use this scenario.

• Multiple modules are grouped in multiple bundles. A deployment scenario could involve putting modules A, B, C in file A.js and modules C, D, E in file C.js. More complex applications would conceivably use this scenario. This means using the modules option in r.js' build config.

Just like any other optimization task, using the last option requires reflecting on the architecture of the application to be deployed and possibly using statistical method to determine how to best split the application, or perhaps select the second option instead.

For instance, one of the applications I'm working on and that uses RequireJS is an editor with multiple modes (similar to how Emacs has modes, or IDEs that support multiple programming languages change how they behave depending on the language being edited). Since a user is most certainly not going to use all modes in a single editing session, it makes complete sense to optimize the application into: a) a core bundle that contains the modules that are always needed and b) one bundle per editing mode, containing all the modules that the mode defines. In this way, a typical usage scenario would boil down to downloading two files: the core bundle, plus one mode bundle.

Similarly, an application which is internationalized would might want to deploy the internationalization data in separate bundles so that someone needing Hindi does not also download the data for 100 other languages with it.

Now to address some specific questions in the question:

So the question is, does require js have to read the whole 2MB file before it can start working?

Yes, RequireJS has to read and execute the whole file. While in theory there may be a way to section off a bundle and execute only the define calls required, I'm not convinced that in practice this could be done reliably. And in the end, it would not be surprising if this were a misoptimization, making performance worse.

and so producing a single file out of r.js may beat the purpose of quick load times... no?

Yes, producing a single file may not be optimal. The solution is to do what I've explained above.

回答2:

My opinion, the answer is yes! You are using one http request in such case and that means you are minimizing Round-Trip Times number.

Here is a summary from that article:

Round-trip time (RTT) is the time it takes for a client to send a request and the server to send a response over the network, not including the time required for data transfer. That is, it includes the back-and-forth time on the wire, but excludes the time to fully download the transferred bytes (and is therefore unrelated to bandwidth). For example, for a browser to initiate a first-time connection with a web server, it must incur a minimum of 3 RTTs: 1 RTT for DNS name resolution; 1 RTT for TCP connection setup; and 1 RTT for the HTTP request and first byte of the HTTP response. Many web pages require dozens of RTTs.

RTTs vary from less than one millisecond on a LAN to over one second in the worst cases, e.g. a modem connection to a service hosted on a different continent from the user. For small download file sizes, such as a search results page, RTT is the major contributing factor to latency on "fast" (broadband) connections. Therefore, an important strategy for speeding up web page performance is to minimize the number of round trips that need to be made. Since the majority of those round trips consist of HTTP requests and responses, it's especially important to minimize the number of requests that the client needs to make and to parallelize them as much as possible.