Question

我正在努力使11年前建立的遗留网站现代化。问题是HTML页面中的一个HTML页面包含超过5000个JavaScript标记，如下所示：

HTML文件：

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<title>Data Items List</title>

<script type="text/javascript">
Var dtHash = new Object();
</script>

<script type="text/javascript" src="./datatypeJS/item1.js"></script>
<script type="text/javascript" src="./datatypeJS/item2.js"></script>
<script type="text/javascript" src="./datatypeJS/item3.js"></script>
<script type="text/javascript" src="./datatypeJS/item4.js"></script>
<script type="text/javascript" src="./datatypeJS/item5.js"></script>

//////and so on for the next 4900+ items!!

</script>
</head>

这显然会导致某些浏览器崩溃（即移动电话，平板电脑等）和桌面浏览器可能需要5分钟来加载页面（我很惊讶它加载了！）由于个人数量众多http请求页面为每个5000+ JS脚本文件。

在HTML DOM的底部，看起来布局是通过jQuery动态生成的：

$(document).ready(function(){ // CREATE THE LAYOUT
   document.getElementById("menuContent").innerHTML = menuContentVar.replace(/\.\.\/\.\.\//g, "../");
  tooltip(); 
  var hash = window.location.hash.replace('#','');
document.getElementById("localAnchorDT").innerHTML = dtHash[hash]; 
       });

这是item1.js（或任何itemX.js）的实际脚本的示例。

item1.js：

dtHash['Item1']="    <td> "+
"       <p class='col_txt' style='font-weight: bold;'>Item A<br/> </p>"+
"    </td>"+
"    <td class='myClass' colspan='2'> "+
"        <p class='col_txt' >Some text here blah b lah balh.</p>"+
"<br/><table border=1><tr>"+
"<td class='subTableHead'>Item 1 Name</td>"+
"</tr>"+
"<tr><td class='col_txt' align='left'><i>Blah blah blah</i> 
+
"</table></td>";

我们可以看到名为dtHash的对象是在<head>的HTML开头创建的，然后是每个项目的JavaScript括号表示法（例如，dtHash['Item1']用于奠定出模板。

我的问题是......是否可以将所有5000多个这些JS（itemx.js）文件合并到一个缩小的JS文件中，并且只在HTML头部分中执行一个http请求？我计划在不久的将来重新开发该网站，但需要有关如何提高网页性能的建议。

感谢您的任何提示！

Answer 1

是的，你可以将它们结合起来，但这不是最大的问题。

最大的问题：变量名称，函数名称等会导致逻辑冲突。这个问题已经发生，特别是在for-loop块中。分离逻辑的一个好方法是创建命名空间来分离职责，即：

var FileOne = {
    process: function() {...}
}

var FileTwo = {
    process: function() {...}
}

FileOne.process();
.
.
.
FileTwo.process();

不得删除5000多个文件，必须保留这些文件以用于开发目的。连接它们的任务是Gulp，Grunt等必须以持续交付方式执行的一个步骤。

我推荐以下资源：

Gulp
Grunt
Webpack
Jenkins 这是为了继续传递并轻松执行连接js文件的任务

Answer 2

~~~~~~~~~

为什么不运行一个快速脚本来读取每个文件并将其附加到1文件中？您可以使用node.js在本地运行它，然后删除标记。只需确保以相同的顺序附加文件以避免依赖性冲突。 node.js示例： 无效代码建议：

<md-dialog style="border-radius: 0px;height: 100vh;max-height: 100%;" class="print">
  <md-dialog-content layout="column" class="container question-dialog-container">
    <div class="vm.reportType"></div>
  </md-dialog-content>
</md-dialog>

~~~~~~~~~

修改

正如@elazer所评论的那样，如果在不同的文件中使用类似的变量名称和/或函数，这可能会导致逻辑上的问题。您或许可以开始考虑如何使用脚本区分它们，但这将成为一项压倒性的任务，其他工具建议可以为您做得更好，更快。

如何将5000多个JS文件合并到HTML头部的单个JS文件中？

2 个答案: