合併多個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