Web开发做优化的时候，需要将脚本进行压缩和合并。压缩好解决，可以找到一大堆工具在构建发布版本的时候压缩一下就好。合并就麻烦了，页面中引用的一大堆脚本文件，需要改为引用合并后的少数脚本文件，需要改动源代码，不能直接由构建工具来完成。

那么就只能从两个地方想办法了：

方法一

从源文件上想办法，将引用脚本那一块独立写到一个include文件inc_scripts中，同时针对发布版本写另一个include文件inc_scripts_r中，在构建的时候用inc_scripts_r替换掉inc_scripts即可。

比如，在ASP.NET中可以这样定义

inc_scripts.inc文件

inc_scripts_r.inc文件

页面文件Demo.aspx

...
    <%    Response.WriteFile ("inc_scripts.inc")%>

使用这种方法需要动态的服务器端语言支持。如果网站是由HTML作为视图页面的MVC模式来开发的，这个方法就不太适用。

方法二，推荐

直接从脚本文件想办法，一开始就生成合并后的文件combined.js给各页面引用，在combined.js再来加载需要合并进来的各个脚本。构建的时候，通过工具直接将脚本合并到comined.js中替换掉原来的内容即可。示例如下：

页面文件demo.html

...    
        

开发阶段的combined.js

// 配置在发布时需要合并为当前文件的脚本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 = '';    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

// jquery.js的内容// common.js的内容// date.js的内容// number.js的内容// format.js的内容// cookie.js的内容