Javascript 带require.JS的主干网是如何工作的？

我试图理解requireJS和主干是如何工作的。当我在Chrome中打开DevTools并打开Sources选项卡时。我看到一个长长的文件夹/文件列表（见下图），这似乎是解压缩时的源代码。但是，我看不到它是通过网络标签加载的

我想知道它是如何结合的，源代码像这样公开是正常的吗？即使我只请求了一个页面（即搜索页面，请参见下图），所有视图都被加载是否正常。我知道像Angular这样的现代Javascript应用程序喜欢在应用程序出现之前预加载它。但这不会给用户带来很多不必要的流量吗？尤其是那些在移动视图上

---

首先，你的问题混合了两件事

• BackboneJS和RequireJS完全不相关
• 您观察到的（脚本面板中的模块依赖结构与所有实际未下载的文件相比）是由于调试器支持“源映射”

既然我猜你的困惑是由这个引起的，我就从

源地图 现代浏览器支持源地图。他们的意图是在将原始源代码连接和/或缩小为一个文件时显示原始源代码

源映射文件描述了例如第1行字符20563处的符号

ZZyb

映射到例如第34行字符1处的

文件/somewhere/in/The/tree

，并命名为

someView

缩小的文件使用

# sourceMappingURL=getaround-min.js.map

签名

有关源地图的更多信息：

在您链接的网站上下载缩小文件（）时，您将看到文件末尾的签名：

//#sourceMappingURL=getaround-min.js.map

然后可以下载该文件。这就是调试器所做的

RequireJS vs.BackboneJS 您可以使用RequireJS来模块化您自己的代码，或者与其他尚未附带此类技术的框架结合使用

例如，AngularJS有自己的依赖项管理，允许您定义命名的依赖项，最后启动应用程序。这允许您将所有源连接（并缩小）到一个文件中，而无需考虑定义顺序

尽管主干和需求是不相关的，但它们在一起工作得很好

安魂曲 RequireJS实现了所谓的

模块定义依赖项和回调以实现该模块

depA:

// Require depB and depC and after they've been loaded 
// call the callback function and pass those 
// dependencies. Finally return that module.
define(["depB", "depC"], function(depB, depC){
   // by convention depB will resolve to depB.js relative 
   // to "depA"'s path

   // object, string, number, function your module is made of
   return something; 
});

define(["depC", "depD"], function(depC, depD){
   // depC has already been loaded and cached - doesn't 
   // need to be downloaded again
});

RequireJS将下载依赖项，集中存储（缓存）它们，并将它们传递给回调。这个过程在依赖关系树中重复。当一个依赖项已经下载（由另一个上游模块下载）时，可以直接传递它，而无需再次下载

depB:

// Require depB and depC and after they've been loaded 
// call the callback function and pass those 
// dependencies. Finally return that module.
define(["depB", "depC"], function(depB, depC){
   // by convention depB will resolve to depB.js relative 
   // to "depA"'s path

   // object, string, number, function your module is made of
   return something; 
});

define(["depC", "depD"], function(depC, depD){
   // depC has already been loaded and cached - doesn't 
   // need to be downloaded again
});

RequireJS优化 通过使用打包，可以避免逐个文件下载所有依赖项（在internet上，也应该避免下载）。模块将在构建期间转换为一个文件