何时使用 Requirejs 以及何时使用捆绑的 javascript？

When to use Requirejs and when to use bundled javascript?

提问by kunjee

This may be a dumb question for web guys. But I am a little confused over this. Now, I have an application where I am using a couple of Javascript files to perform different tasks. Now, I am using Javascript bundlerto combine and minify all the files. So, at runtime there will be only one app.min.js file. Now, Requirejsis used to load modules or files at runtime. So, the question is if I already have all things in one file, then do I need requirejs? Or what is a use case scenario where I can use requirejs and/or bundler?

对于网络人来说，这可能是一个愚蠢的问题。但我对此有点困惑。现在，我有一个应用程序，我在其中使用几个 Javascript 文件来执行不同的任务。现在，我使用 Javascript打包器来合并和缩小所有文件。因此，在运行时将只有一个 app.min.js 文件。现在，Requirejs用于在运行时加载模块或文件。所以，问题是如果我已经将所有东西都放在一个文件中，那么我还需要 requirejs 吗？或者我可以使用 requirejs 和/或 bundler 的用例场景是什么？

Please let me know if any further details are needed.

如果需要任何进一步的细节，请告诉我。

采纳答案by BishopZ

This is a hotly contested issue among many proficient javascript developers. Many other languages have a "compilation" phase where the entire program is bundled up for deployment (JBoss's .WAR files come to mind). Programmers that come from more traditional backgrounds often favor this approach.

这是许多熟练的 javascript 开发人员之间激烈争论的问题。许多其他语言都有一个“编译”阶段，在这个阶段将整个程序捆绑在一起进行部署（想到 JBoss 的 .WAR 文件）。来自更传统背景的程序员通常喜欢这种方法。

Javascript has seen such growth in recent years that it is difficult to chart exact best practices, but those that appreciate the more functional nature of Javascript often prefer the module loading approach (like require.js uses).

Javascript 近年来出现了如此大的增长，以至于很难绘制出准确的最佳实践，但那些欣赏 Javascript 更实用的特性的人通常更喜欢模块加载方法（如 require.js 的使用）。

I wrote Frame.jswhich works much like require.js, so my bias is towards the module loader approach.

我写了Frame.js，它的工作原理很像 require.js，所以我偏向于模块加载器方法。

To answer your question directly, yes, it is one or the other.

直接回答你的问题，是的，它是一个或另一个。

Most that argue for packing your scripts into a single file believe it enables more compression and is thus more efficient. I believe the efficiency advantages of packaging are negligible in most cases because: (1) module load times are distributed over the entire session, (2) individual modules can be compressed to nearly the same percentage, (3) individual modules can be cached by the server and routers separately, and (4) loading scripts only when they are needed ultimately allows you load less code for some users and more code overall.

大多数认为将脚本打包成单个文件的人认为它可以实现更多的压缩，因此效率更高。我相信在大多数情况下打包的效率优势可以忽略不计，因为：(1) 模块加载时间分布在整个会话中，(2) 各个模块可以压缩到几乎相同的百分比，(3) 各个模块可以通过服务器和路由器分开，以及 (4) 仅在需要时加载脚本最终允许您为某些用户加载更少的代码和更多的整体代码。

In the long run, if you can see an advantage to dynamic script loading use it. If not, bundle your scripts into a single file.

从长远来看，如果您能看到动态脚本加载的优势，请使用它。如果没有，请将您的脚本捆绑到一个文件中。

回答by Matt Greer

Generally you only use RequireJS in its loading form during development. Once the site is done and ready for deployment, you minify the code. The advantage here is RequireJS knows exactly what your dependencies are, and thus can easily minify the code in the correct order. Here is what it says on the RequireJS website:

通常你只在开发过程中以加载形式使用 RequireJS。一旦站点完成并准备好部署，您就可以缩小代码。这里的优点是 RequireJS 确切地知道您的依赖项是什么，因此可以轻松地以正确的顺序缩小代码。这是RequireJS 网站上的内容：

Once you are finished doing development and want to deploy your code for your end users, you can use the optimizer to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify the result.

完成开发并希望为最终用户部署代码后，您可以使用优化器将 JavaScript 文件组合在一起并缩小它。在上面的例子中，它可以将 main.js 和 helper/util.js 合并到一个文件中并缩小结果。

回答by Harry

It depends on your application. If you're making a server-side app with only modest javascript (less than 100kb minified) then go for total bundling, you're probably going to be fine.

这取决于您的应用程序。如果您制作的服务器端应用程序只使用适度的 javascript（压缩后小于 100kb），然后进行完全捆绑，您可能会没事的。

But if you're making a javascript app and have a ton of code in it, then your needs are going to be different.

但是，如果您正在制作一个 javascript 应用程序并且其中包含大量代码，那么您的需求就会有所不同。

For example, in my app I bundle all the core files. There's jQuery, underscore, backbone, my main app files, my user login system, my layout system, my notifications and chat system, all are part of my big initial file.

例如，在我的应用程序中，我捆绑了所有核心文件。有 jQuery、下划线、主干、我的主要应用程序文件、我的用户登录系统、我的布局系统、我的通知和聊天系统，所有这些都是我的大初始文件的一部分。

But I have many other modules as well that isn't part of the initial bundle, that are loaded after those.

但是我还有许多其他模块，它们不属于初始包的一部分，它们是在这些模块之后加载的。

The forums, the wiki, the wysiwyg, color picker, drag/drop, calendar, and some animation files are part of the second category. You need to make reasonable decisions about what's commonly used and needed immediately vs what can be delayed.

论坛、维基、所见即所得、颜色选择器、拖放、日历和一些动画文件属于第二类。您需要就常用的和需要立即使用的内容与可以延迟的内容做出合理的决定。

If I include everything immediately I can get above a meg of javascript, which would be insane and make the initial boot unacceptably slow.

如果我立即包含所有内容，我可以超过一大堆javascript，这将是疯狂的，并使初始启动速度慢得令人无法接受。

The second category starts downloading after initSuccessevent fires from the initial file.

第二类在initSuccess事件从初始文件触发后开始下载。

But the second category is more intelligent than the first in that it loads what's more important first. For example if you're looking at the wiki it'll load the wiki before it loads the color picker.

但是第二类比第一类更智能，因为它首先加载更重要的东西。例如，如果您正在查看 wiki，它将在加载颜色选择器之前加载 wiki。