合并压缩JavaScript，开发发布两不误-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_33843947/article/details/85083498

本文介绍了Web开发中脚本优化的方法，包括脚本压缩与合并。提供了两种合并脚本的策略：一是通过动态服务器语言替换包含文件；二是直接生成合并后的脚本文件并在构建时更新内容。

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

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

方法一

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

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

inc_scripts.inc文件

<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文件

<script type="text/javascript" src="js/combined.js"></script>

页面文件Demo.aspx

<html>
<head>...</head>
<body>
<!-- 页面内容 -->
<%
    Response.WriteFile ("inc_scripts.inc")
%>
</body>
</html>

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

方法二，推荐

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

页面文件demo.html

<html>
<head>...</head>
<body>
    <!-- 页面内容 -->
    <script type="text/javascript" src="js/combine.js"></script>
</body>
</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 = '<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

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