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，如需转载请自行联系原作者
