Web开发做优化的时候，需要将脚本进行压缩和合并。压缩好解决，可以找到一大堆工具在构建发布版本的时候压缩一下就好。合并就麻烦了，页面中引用的一大堆脚本文件，需要改为引用合并后的少数脚本文件，需要改动源代码，不能直接由构建工具来完成。
那么就只能从两个地方想办法了：
方法一
从源文件上想办法，将引用脚本那一块独立写到一个include文件inc_scripts中，同时针对发布版本写另一个include文件inc_scripts_r中，在构建的时候用inc_scripts_r替换掉inc_scripts即可。
比如，在ASP.NET中可以这样定义
inc_scripts.inc文件
|
1
2
3
4
5
6
|
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/number.js"></script>
<script type="text/javascript" src="js/format.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
|
inc_scripts_r.inc文件
|
1
|
<script type="text/javascript" src="js/combined.js"></script>
|
页面文件Demo.aspx
|
1
2
3
4
5
6
7
8
9
|
<html>
<head>...</head>
<body>
<!-- 页面内容 --><% Response.WriteFile ("inc_scripts.inc")
%></body>
</html>
|
使用这种方法需要动态的服务器端语言支持。如果网站是由HTML作为视图页面的MVC模式来开发的，这个方法就不太适用。
方法二，推荐
直接从脚本文件想办法，一开始就生成合并后的文件combined.js给各页面引用，在combined.js再来加载需要合并进来的各个脚本。构建的时候，通过工具直接将脚本合并到comined.js中替换掉原来的内容即可。示例如下：
页面文件demo.html
|
1
2
3
4
5
6
7
|
<html>
<head>...</head>
<body>
<!-- 页面内容 -->
<script type="text/javascript" src="js/combine.js"></script>
</body>
</html>
|
开发阶段的combined.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// 配置在发布时需要合并为当前文件的脚本var scripts = [
"jquery.js",
"common.js",
"date.js",
"number.js",
"format.js",
"cookie.js"
];// 找到脚本目录路径var basepath = (function () {
var s = document.getElementsByTagName("script");
var s[s.length - 1].getAttribute("src").replace(/\/[^/]+$/, "/");
var href = window.location.href.replace(/\/[^/]+$/, "/");
return href + src;
})();// 定义载入脚本的函数var loadScript = (function(basepath) {
var template = '<script type="text/javascript" src="{0}"></script>';
return function(src) {
var basepath + src;
document.writeln(template.replace(/\{0\}/, href));
};
})(basepath);// 遍历载入scripts数组中配置需要载入的脚本(function () {
for (var i = 0; i < scripts.length; i++) {
loadScript(scripts[i]);
console.log("loaded " + scripts[i]);
}
})(); |
构建过程合并后的combined.js
|
1
2
3
4
5
6
|
// jquery.js的内容// common.js的内容// date.js的内容// number.js的内容// format.js的内容// cookie.js的内容 |
本文转自边城__ 51CTO博客，原文链接：http://blog.51cto.com/jamesfancy/1212544，如需转载请自行联系原作者