WordPress网站将多个JavaScript文件合并成一个

在一个网页加载完之前，浏览器会发出很多个HTTP请求。网页中有很多元素，如图片、CSS样式、JavaScript脚本等等。每一张图片、每一个CSS样式文件、JavaScript脚本都需要浏览器做出一次HTTP请求。减少HTTP请求可以大幅提升网页的加载速度。WordPress网站一般都会有大约10个JavaScript文件。而将10个JavaScript文件合并成一个文件就可以减少9次HTTP请求。在这篇文章中，我将介绍如何将多个JavaScript文件合并成一个文件。

找出网站有多少个外部JavaScript文件

首先，打开网站主页，然后右击鼠标，选择“查看源码”。再按CTRL＋F快捷键调出搜索框，在搜索框中输入

后回车。选择“高亮全部”，你就能看见网页中有多少个外部javascript文件了。如下图，head中有两个外部JavaScript。一般在footer部分也能找到外部JavaScript。

合并多个JavaScript文件的方法

创建main.js文件

首先在网站根目录下面创建一个文件，命名为main.js。然后编辑main.js文件。我们需要将外部JavaScript文件的内容全部粘贴到main.js文件中。在网页的源码页面，点击JavaScript文件的地址，也就是上图中 src 后面的地址。打开了JavaScript文件，按CTRL＋A选择全部内容，然后CTRL＋C复制全部内容，将内容粘贴到main.js文件中。再点击下一个JavaScript文件的 src 地址，依次它们的内容粘贴到main.js文件中。最后保存。

引用main.js文件

main.js创建好以后，我们需要在wordpress主题文件夹的footer.php文件中引用main.js。footer.php文件的路径一般为/var/www/html/wp-content/themes/themename/footer.php。

在<?php wp_footer(); ?>的上一行，粘贴下面的<script>标签，将域名替换成你自己的域名。保存文件。

取消加载原来的JavaScript文件

我们在footer.php文件中引用了main.js文件后，原来的JavaScript文件就不需要让浏览器加载了。首先我们需要找到每个JavaScript的handle名称。

找出JavaScript文件的handle名称

wordpress使用wp_enqueue_script函数来添加JavaScript文件，这个函数的第一个参数是handle名称。我们找到了每个JavaScript文件的handle名称后，就能在用下面的Linux命令查找出每一个使用wp_enqueue_script函数的文件以及函数在文件中的行数，然后将这些函数删除。

你也许会问，为什么不直接用grep查找wp_enqueue_script呢？原因是wp_enqueue_script不仅用于添加网页源码中的那些JavaScript文件，很多用wp_enqueue_script添加的JavaScript并不会出现在网页源码中。所以如果直接查找wp_enqueue_script，那么查找结果中很多是我们不需要的，我们也就不知道需要删除哪些wp_enqueue_script函数了。

打开主题文件夹下面的functions.php文件，将下面的代码粘贴到文件的末尾，然后保存文件。

刷新网站主页，你会在网页的左上角看到每一个JavaScript文件的handle名称。将这些handle名称复制下来，再把刚才functions.php文件中添加的代码删除。

然后在服务器终端下，按照下面的命令查找，jquery是handle名称。分别查找每一个handle名称。

查找出来后，在对应的文件中删除这个wp_enqueue_script函数。每一个javascript文件都要这么做一次。

完成之后，刷新网站主页，查看网页源码后会发现，外部JavaScript文件只有一个了，就是刚才合并后的JavaScript文件。原来的JavaScript文件都没有加载。