结合JS文件的最佳实践 [英] Best practice to combine JS files

问题描述

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

I always have this questions in mind come to JS optimise, nowadays most people combine all their CSSs into single file by using Less, Sass or others methods. but come to JS i am a bit hesitate on the approach, cause there are plug-in, frameworks and your own code. Just wondering is there a rule or best practice to approach.

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

so should i combine all my JSs into single JS include plug-in, frameworks, libary and my own code into one or keep them modularized accordingly.

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

I know it may depend on the size of the project, but what's the measurement and when I should combine all into one or modularize. Is there any rules I should be followed.

任何建议都表示赞赏。

推荐答案

组合和缩小自己的开发JavaScript通常是一个好主意。如果请求太多（特别是如果有多个小文件），则有多个HTTP请求会减慢加载时间。 Google PageSpeed Insights在此处提供了有关如何操作的指南。

It's generally a good idea to combine and minify your own development JavaScript. Having multiple HTTP requests can slow down load times if there are too many requests (especially if there are multiple small files). Google PageSpeed Insights gives some guidelines on how to do it here.

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

As @veroxii says, most people end up using a "build" since minifying and combining everything manually would be a huge waste of time. For small sites that I work on that don't really have a built in minification system, I like to use gulpjs along with gulp-uglify and gulp-concat to minify and combine javascript resources.

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

You have to be careful when combining though because often times, scripts will depend on other scripts. Say you have two scripts that you combined where scriptB depends on scriptA. If the browser loads and runs scriptB before scriptA because it came first in the combined file, then bad things will happen. Either be careful with your script combination or use something like requirejs.

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

You can't really do much in terms of minification or combination when using a third party script loaded in from a CDN (like jQuery) except use the production script.min.js resource that they provide. You could potentially download their script and throw it into your minification process, but most users are more likely to already have the CDN version cached by their browser.

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

The biggest thing when it comes to JavaScript is making sure the loading of the scripts don't block the rendering of the page. Most JavaScript is useless without content, so why not let the content load first and then load in the script? Users will see the content first and then interact so it's probably a good idea to load those resources in that order. More on that here. Either put your script tags at the bottom of the page, use the asyncattribute, or use an asynchronous javascript loader like loadJS or requirejs.

这篇关于结合JS文件的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！