合并压缩JavaScript，开发发布两不误

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

1	`<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的内容

本文转自边城__ 51CTO博客，原文链接：http://blog.51cto.com/jamesfancy/1212544，如需转载请自行联系原作者

合并压缩JavaScript，开发发布两不误相关推荐

uglifyjs php,使用UglifyJS合并/压缩JavaScript
在UglifyJS入门中主要记录了UglifyJS的安装,配置.篇末在命令行中使用了一个简单命令来压缩一个JS文件.这篇以编程的方式去压缩JS文件.即写一个build.js文件,使用node命令执行该 ...
[转载]用UglifyJS2合并压缩混淆JS代码——javascript系列
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
推动RISC-V拾级而上赛昉科技发布两款高性能产品: JH7110多媒体处理器与VisionFive 2开发板
推动RISC-V拾级而上赛昉科技发布两款高性能产品 8月23日,RISC-V领域迎来重大突破.RISC-V软硬件生态领导者赛昉科技在线举办2022新产品发布会,揭晓两款重磅新品:全球首款量产高性能 ...
JetBrains发布两项重要更新：基于IDE的远程开发解决方案、轻量级编辑器Fleet
近日,JetBrains 对外发布两项重要产品更新:专为云端和其他服务器打造的远程开发解决方案,以及轻量级编辑器Fleet. 为IntelliJ 平台引入远程开发支持在近期陆续发布的2021.3 版 ...
使用SeaJS实现模块化JavaScript开发
2019独角兽企业重金招聘Python工程师标准>>> 前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加 ...
使用SeaJS实现模块化JavaScript开发【转】
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
JavaScript开发人员需了解的工具内容
自从HTML5变得流行以来,整个Web平台取得了长足的进步,人们也开始将JavaScript视为一门能够创建复杂应用的语言.许多新的API纷纷浮现,而关于浏览器如何应用这些技术的文章也大量涌现. 作为 ...
JavaScript开发工具简明历史
译者按: JavaScript开发要用到的工具越来越多,越来越复杂,为什么呢?你真的弄明白了吗? 原文: Modern JavaScript Explained For Dinosaurs 为了保证可 ...
面向JavaScript开发人员的Adobe AIR与Dreamweaver
入门教程,非常详细,CS4里面应该可以省略前面几步直接开发了. Adobe AIR对于HTML/JavaScript应用程序与桌面的集成有着出色的支持,但除了所有附加功能之外,还需要一些其他工具和技术 ...

合并压缩JavaScript，开发发布两不误

合并压缩JavaScript，开发发布两不误相关推荐

最新文章

热门文章