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