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

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

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

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

script type='text/javascript'

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

外部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>标签,将域名替换成你自己的域名。保存文件。

<script type='text/javascript' src='http://www.linuxdashen.com/main.js'></script>

footer javascript

取消加载原来的JavaScript文件

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

找出JavaScript文件的handle名称

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

grep -rnw '/var/www/html/' -e "wp_enqueue_script( 'handle-name'"

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

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

function head_scripts_handle() {
   global $wp_scripts;
   foreach( $wp_scripts->queue as $handle ) :
   echo $handle,' ';
   endforeach;
}
add_action( 'wp_print_scripts', 'head_scripts_handle' );

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

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

grep -rnw '/var/www/html/' -e "wp_enqueue_script( 'jquery'"

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

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

为这篇文章评分
[Total: 0 Average: 0]

Leave a Reply

Your email address will not be published.

The maximum upload file size: 2 MB. You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here