合并多个JavaScript文件

第一部分 – 第10章

移动网站页面使用多个外部JavaScript文件是一个非常普遍的现象。 JavaScript对于一些业务目标而言更是必不可少。例如：

  • 支持用户与移动网站页面交互。在大多数情况下，为了使用户交互能够在你的移动网站页面上正确执行，需要编写自己的JavaScript代码。
  • 允许跟踪移动网站页面上的用户行为。例如，谷歌分析JavaScript跟踪代码可以用来记录移动网站页面上的用户行为。

单一JavaScript文件

使用JavaScript最常用的方式就是将JavaScript放到外部文件中，并将这个外部JavaScript文件包含到网站页面的head部分中。例如，外部文件命名为main.js。 

<head>
<script src="http://m.example.com/main.js"></script>
</head>

多个JavaScript文件

在多数其他情况下，可能会有多个外部JavaScript文件。在一个单一移动网站页面内，可能head部分包括一些，body部分包含另一些。这种方式并不好，因为下载每个外部JavaScript文件会增加一个额外却不必要的http请求，从而降低页面的加载速度。

比如，移动网站页面有3个外部JavaScript文件，其中2个在head部分，1个在body部分。 

<head>
<script src="http://m.example.com/main.js"></script>
<script src="http://m.example.com/script2.js"></script>
</head>
<body>
<script type="text/javascript" src="http://m.example.com/script3.js"></script>
</body>

减少HTTP请求

页面要求网络浏览器下载的外部资源越少，页面加载的速度越快。

当网络浏览器必须下载的外部JavaScript文件变少时，移动网站页面就可以更快加载。为达成这个目标，可以将多个JavaScript文件合并为更少的文件甚至是一个单一文件。这样的操作将减少http请求的数量。假定可以合并所有的外部JavaScript文件为一个单一文件（例如combined.js）。 

<head>
<script src="http://m.example.com/combined.js"></script>
</head>

合并多个JavaScript文件为一个文件

合并所有JavaScript文件为一个单一文件：

  • 打开所有3个JavaScript文件。例如main.js，script2.js，以及script3.js。
  • 拷贝并粘贴3个JavaScript文件所有的内容到一个新的文件中，例如combined.js。
  • 更新head部分script标签的内容以请求新文件combined.js。
  • 移除用于请求其他2个JavaScript文件的所有script标签的内容。

提示

  • 如果你无法将所有的JavaScript文件合并为一个单一文件，就尽量减少外部JavaScript文件的数量。在大多数情况下，合并7至8个JavaScript文件为2至3个具有很大的可能性，这并不会导致任何JavaScript故障的发生。
  • JavaScript文件的顺序往往很重要。例如，第一个JavaScript文件是一个jQuery文件，但在第二个JavaScript文件的代码中，使用了第一个文件中的某个功能。在这种情况下， 将这些JavaScript代码被合并到一个单一JavaScript文件中时，必须确保以正确的顺序放置。

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Combine Multiple JavaScript Files – 繁体中文版：合并多个JavaScript文件






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book