JavaScript:一个大文件好还是多个轻文件好？

Question

在同一页面上包含许多 javascript 文件会导致性能低下。我想问的是:最好是保留单独的文件还是将所有文件包含在一个 javascript 文件中？

如果最好将所有内容都包含在同一文件 Javascript 中，我该如何避免不同脚本之间的冲突？

Answer 1

It is best to keep separate files or include all files in one file Javascript?

为避免多个服务器请求，最好将所有 JavaScript 文件分组到一个文件中。

如果您使用的是 C#.Net + ASP.Net，您可以 bundle your files — 这是压缩脚本的好方法。

how can I avoid conflicts between different scripts?

您可以使用 RequireJS ;不同的名字也是一个好主意；每次插件/脚本结束时，使用 ; 来确定它的结束。

性能考虑

为了保持脚本的生产力，您应该 minify 他们。

单页应用解决方案

在您缩小您的脚本后，然后将它们全部分组(无论它们是插件还是您自己的代码)到一个文件中并在您的应用程序中调用它。

多页面应用的解决方案

在这种情况下，您应该只为每个页面调用必要的 JavaScript。 你怎么做到的？

在缩小所有脚本后，将它们分成类别。看一看就明白了:

/assets/js/core.js — 您将您的 JavaScript 代码放在这里，这是您所有页面所必需的。它是你的核心；你的内核；

/assets/js/plugins.js — 在这里放置与所有页面一起运行的所有插件(即 jquery、backbone、knockout 等)；

/assets/js/home/bootstrap.js — 神奇之处在于:在此文件中，您必须填写您的家将调用的代码；

/assets/js/contact/bootstrap.js — 与之前相同:您应该将此文件与您的联系页面将调用的代码放在一起。

提示 core.js 和plugins.js 可以在您部署应用程序时占用相同的文件。为了更好地理解和开发，最好将它们保存在单独的文件中。

第三方插件

给你一个想法，你的插件文件应该是这样的:

/* PlaceHolder plugin | http://www.placeholderjs.com/ | by @phowner */
; $(function(){ /* the placeholder's plugin goes here. */ });

/* Masked Inputs plugin | http://www.maskedjs.com/ | by @maskedowner */
; $(function(){ /* the masked input's plugin goes here. */ });

/* Mousewheel plugin | http://www.mousewheeljs.com/ | by @mousewheelowner */
; $(function(){ /* the mousewheel's plugin goes here. */ });