结合JS文件的最佳实践

Question

我总是将这些问题考虑到JS优化，现在大多数人通过使用Less，Sass或其他方法将所有CSS组合成单个文件。但是来到JS我对这种方法有点犹豫，因为有插件，框架和你自己的代码。只是想知道是否有规则或最佳实践可以接近。

所以我应该将所有我的JS组合成单个JS包括插件，框架，libary和我自己的代码到一个或相应地保持模块化。

我知道这可能取决于项目的规模，但是衡量的是什么，何时应该将所有项目合并为一项或模块化。有没有我应该遵循的规则。

任何建议都表示赞赏。

Answer 1

组合和缩小您自己的开发JavaScript通常是一个好主意。如果请求太多（特别是如果有多个小文件），则有多个HTTP请求会减慢加载时间。 Google PageSpeed Insights提供了一些指导原则here。

正如@veroxii所说，大多数人最终使用“构建”，因为缩小并手动组合所有内容将是一个巨大的浪费时间。对于我工作的小型网站，我们并不真正拥有内置的缩小系统，我喜欢使用gulpjs以及gulp-uglify和gulp-concat来缩小和合并javascript资源。

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

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

关于JavaScript，最重要的是确保加载脚本不会阻止页面的呈现。大多数JavaScript在没有内容的情况下是无用的，那么为什么不首先加载内容然后加载脚本呢？用户将首先看到内容然后进行交互，因此按顺序加载这些资源可能是个好主意。 More on that here。将脚本标记放在页面底部，使用async属性，或使用loadJS或requirejs等异步javascript加载程序。

Answer 2

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

例如，django有https://django-pipeline.readthedocs.org/en/latest/，grails有http://grails.org/plugin/asset-pipeline

这可以解决您提出的所有问题。我确信无论你在服务后端使用什么都有类似的东西。

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