通过PHP文件包含外部脚本的任何好处或缺点包括vs script src - Any benefits or downsides to including external scripts via PHP file include vs script src?

与<script src="" />相比，通过PHP包含.js文件有什么好处或缺点吗?虽然下面的方法1会导致更少的HTTP请求，但这样做值得吗?例如:

<html>
  <head>
      <!-- Approach 1 -->
      <?php
      echo '<script>',
           file_get_contents('script1.js'),
           file_get_contents('script2.js'),
           file_get_contents('script3.js'),
           '</script>';
      ?>
      <!-- Approach 2 -->
      <script src="script1.js"></script>
      <script src="script2.js"></script>
      <script src="scriptn.js"></script>
  </head>
  ...
</html>

一般来说，HTTP请求的数量不应该是一个太大的问题。首先我要说的是，只有当你发现它是一个瓶颈时，你才需要特别针对它。

话虽如此，保持低请求是有好处的。特别是具有高延迟的用户将受益最多-他们可能需要等待1-2秒或更多才能开始下载文件。由于延迟与带宽没有严格的耦合，所以你可以选择一个连接速度快但启动时间长的人。

然而，通过包含PHP文件的方式将JS代码直接放在HTML中会有点适得其反——这意味着每次点击都要做更多的处理。同时有1000人访问意味着需要超过1000次的处理时间，因为对于每个点击，您将需要检索多个文件，提取内容并将其放入请求中。它可能很快，但是由于很多人访问，您最终会遇到性能问题。当然，缓存会有帮助，但它只能到此为止。

因此，您可能想要的主要目标是保持低请求量，不要做太多的处理并能够提供大量文件。由于服务器在服务内容方面相当出色，如果只保留更多的静态文件，那么最后一点就被忽略了。由于静态文件不需要那么多的处理，如果解决了这个问题，就可以完成倒数第二项。那么，第一个呢?

输入JavaScript构建工具。现在，它们有很多很多，但总的来说，它们只是用不同的方法做同样的事情。事实上，在大多数情况下，它们可以被认为是一堆美化的脚本，因为它们捆绑了一些功能，并允许您根据需要添加更多功能。您可以很容易地使用您选择的任何脚本语言创建自己的脚本。然而，不要让"美化脚本"的标签欺骗了你——JavaScript构建工具真的很擅长它们所做的，它们会让你的项目在web上更美观。

总的来说，他们将支持(几乎)开箱即用的功能将是

预处理文件并派生其他文件
用ES6编写的JavaScript文件可以翻译成兼容的ES5代码
Less/Sass模板可以编译成正常的CSS
优化资源
- JavaScript文件可以被连接
- JavaScript文件可以额外(或代替)被最小化
- 图片可以优化
对代码库执行静态和活动检查
- 运行JSCS, JSHint, ESLint, CSSLint等
- 正在运行任何测试
生产可交付产品
- 排除不需要的文件-例如，测试代码
- 包含实际运行所需的任何数量的文件-例如，JavaScript代码，这可能是前面步骤之一的输出
- 将这些文件捆绑在一起——要么只是将它们移动到一个新目录，要么压缩它们，要么给你一个就是你的webapp

所以，构建工具可以做很多事情。它们支持的功能甚至更多，大多数都允许你在上面提供任何你想要的定制。然而，这是一个web应用程序所需要的坚实核心。您感兴趣的事情是在步骤2中-连接JavaScript文件就像它听起来一样-如果您有file1.js， file2.js和file3.js您将生成 fil123 .js，其中包括所有三个。这意味着您的用户只需发出一个HTTP请求，而不是三个HTTP请求。第二件可以做的事情是最小化，它使用JavaScript代码并尽可能地减小大小，这样它们就更容易通过互联网传输。例如这段代码(故意冗长):

/**
 * Function that can produce the sum of any numbers
 * @param {number} inputOne - the first number to add
 * @param {number} inputTwo - the second number to add
 * @return {number} the combination of both of the above
 */
function add(inputOne, inputTwo) {
   //using JavaScript mathematical operation
   var output = inputOne + inputTwo;
   return output;
}

将会变成这个:

function add(a,b){var c=a+b;return c}

因此，通过预连接和预最小化JavaScript代码，您将服务更小的请求，并且将为每个命中做更少的处理，因为您所需要做的就是提供静态文件。

这里只有很少几个可用的构建工具，因为很难跟上所有的构建工具:

Grunt -它是相当强大的配置驱动。Gulp——同样强大，但是用"任务"来定义它的工作流，这些任务是非常小的JavaScript操作。Webpack——专注于打包你的应用并生成你的构建产物。

我更喜欢方法2，它会导致更多的http请求(但只有一次，其他时间它将被缓存在浏览器上)方法1:如果您有10个3Kb的脚本，则每次加载页面加载30kb。

通过内联加载脚本，特别是在<head>中，您正在导致页面执行javascript，因此阻止页面的其余部分加载。

如果您使用<script>标记(您应该将其放在<body>标记的末尾)，您可以始终使用async或defer属性加载它们，并且您还可以利用浏览器缓存。

更少的HTTP请求，但你做更多的处理(IO也在这种情况下)为每个请求完成。最好将脚本作为静态资源提供，这样浏览器就可以缓存它。