10

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

如果最好将所有内容包含在同一个文件 Javascript 中，我怎样才能避免不同脚本之间的冲突？

4

4 回答 4

12

最好保留单独的文件或将所有文件包含在一个文件中 Javascript？

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

如果你使用 C#.Net + ASP.Net，你可以捆绑你的文件——这是一种压缩脚本的好方法。

如何避免不同脚本之间的冲突？

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

性能考虑

为了保持脚本的生产力，您应该缩小它们。

单页应用解决方案

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

多页面应用程序的解决方案

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

缩小所有脚本后，将它们分开为categories。看一看就明白了：

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

/assets/js/plugins.js— 在这里，您放置了与所有页面一起运行的所有插件（即 jquery、backbone、knout 等）；

/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. */ });
于 2013-07-18T12:57:38.797 回答
2

提供一个大文件还是提供多个小文件取决于很多因素：

  • 所有客户端都需要完全相同的代码库吗？
    • 即现代浏览器可能不需要 shim，那么为什么要提供它呢？
  • 我们会定期更改这些文件吗？
    • 缓存不经常更改的文件可用于减少流量
  • 我们要使用 CDN 吗？
    • 将 jQuery 从纽约服务到纽约，而不是将它推到地球的一半左右，可能会摊销额外的 HTTP 请求（至少在性能方面）

通过为每个脚本引入您自己的范围，可以减少/消除冲突。一种常见的方法是使用 IIFE/SIAF 并注入所需的变量。

一个快速简单的 IIFE 示例：

(function () { // IIFE
    var undefined = true;
})();

if (document.querySelectorAll === undefined) {
    // polyfill
}

如果 IIFE 中的内容将在全局范围内执行，它可能会使您的 polyfill 崩溃。由于它是在本地（函数）范围内执行的，因此您可以避免冲突。

注意：通常，你的 polyfill 也不应该在全局范围内实现。

于 2013-07-18T13:17:15.573 回答
0

冲突代码与组合 JavaScript 或将其放在单独的文件中无关，但它需要下降编程。

结合或不结合取决于多种因素，例如：

  • 文件大小
  • 您期望有多少变化。
  • 一次必须加载多少相关代码，将其放在一个文件或单独的文件中很有用
  • 一个文件使文件请求的数量保持在较低水平
  • ..
于 2013-07-18T13:00:15.130 回答
0

捆绑通常更好。如果您使用的是 Visual Studio，则可以将 Web Essentials 捆绑用于 JS、CSS 甚至图像精灵。

http://vswebessentials.com/features/bundling

于 2014-10-07T22:56:41.070 回答