Javascript 组合JS文件的最佳实践

在JS优化中，我总是牢记这个问题，现在大多数人使用更少的、Sass或其他方法将所有CSS合并到一个文件中。但是说到JS，我在方法上有点犹豫，因为有插件、框架和您自己的代码。只是想知道是否有一个规则或最佳实践可以接近

所以，我应该将我所有的JS组合成一个JS，包括插件、框架、库和我自己的代码，还是将它们相应地模块化

我知道这可能取决于项目的规模，但度量是什么，以及何时应该将所有内容合并为一个或模块化。有什么规则我应该遵守吗

---

非常感谢您的建议。

您在服务器端使用的是哪种框架？大多数框架都有一个“资产管道”，已经内置或作为插件

例如，django有，grails有

这会满足你的所有要求，甚至更多。我相信无论你在服侍后端使用什么，都会有类似的东西

---

编辑：澄清一下-我不认为这是人们手工做的事情。他们有一个工具，可以在运行中或在构建/部署时执行此操作。

通常最好合并并缩小您自己的开发JavaScript。如果有太多的请求（特别是如果有多个小文件），拥有多个HTTP请求会降低加载时间。Google PageSpeed Insights提供了一些关于如何做到这一点的指导

如前所述，大多数人最终使用“构建”，因为手动缩小和合并所有内容将是一种巨大的时间浪费。对于我工作的那些没有内置缩小系统的小型站点，我喜欢与javascript资源一起使用，并缩小和组合javascript资源

但在组合时必须小心，因为脚本通常依赖于其他脚本。假设有两个脚本组合在一起，其中scriptB依赖于scriptA。如果浏览器在scriptA之前加载并运行scriptB，因为它首先出现在组合文件中，那么糟糕的事情就会发生。要么小心你的脚本组合，要么像这样使用

在使用从CDN（如jQuery）加载的第三方脚本时，除了使用它们提供的production script.min.js资源之外，在缩小或组合方面，您真的做不了多少。您可能会下载他们的脚本并将其放入您的缩小过程中，但大多数用户更可能已经将CDN版本缓存在他们的浏览器中

---

谈到JavaScript，最大的问题是确保脚本的加载不会阻碍页面的呈现。大多数JavaScript没有内容是无用的，所以为什么不让内容先加载，然后再加载到脚本中呢？用户将首先看到内容，然后进行交互，因此按此顺序加载这些资源可能是个好主意。将脚本标记放在页面底部，使用

async

属性，或者使用异步javascript加载程序，如或requirejs。

按照它们所依赖的顺序组合和缩小。该框架将是最顶级的文件。好的，你的方法是将所有内容合并为一个，我使用Require.js它可以将所有内容合并为一个。组合尺寸是否会引起关注？我知道在传输文件时gzip可能会有所帮助。（我的combine（eveything）可能会高达400-500k）如果你的js文件太大而无法传输，那你就大错特错了。我上次检查的整个jquery库超过10000行，只有276KB。只要你的内存低于几MB，你就应该很好。你也可以及时加载，所以如果用户单击搜索框，加载自动完成模块。请确保您的HTTP缓存设置正确，使浏览器不会重新下载该文件（301），以加快下载速度。非常感谢，非常详细的解释。