本文共 2366 字，大约阅读时间需要 7 分钟。
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的内容 |