打包并压缩seajs代码
背景
seajs是一款优秀的模块开发插件,但是当我们使用它来进行模块化开发的时候,由于它的每个模块的加载都会进行一次http请求,那么当模块数量倍增的时候,会拖慢页面的加载速度。
通常我们为了能加快页面的加载速度,都会对js进行压缩并把关联的模块打包为一个独立的js文件,这样可以大大减少js的文件大小并且减少http请求的次数,这样可以提升到页面的加载速度。
我们可以是用spm来对js文件进行打包、压缩(使用spm-build),但是当我们编写兼容多种环境的js的时候(既可以直接用script引用又可以使用seajs来引用),那么我们就没办法使用前面的方法来对js进行打包和压缩了。
其次就是使用spm-build还要先了解package.json文件配置,还是有少许麻烦的,为了减轻上手的难度和简化功能,这里我们将介绍另类的使用nodejs来对js脚本进行压缩。
实现
http://tool.css-js.com/站点提供了多种脚本压缩,通过使用YUI压缩,我们发现它实际上是使用http的POST来实现代码压缩的,如图:
接着我们使用ajax来进行测试,代码如下:
$.post('http://tool.css-js.com/!java/?type=js&munge=true&preserveAllSemiColons=false&disableOptimizations=false', {
code: 'var x = (function() { var foo = 1, bar = 2; return (foo + bar) }())'
}, function(res){
console.log(res);
});
结果跟截图的效果是相同的,接下来使用nodejs来编写一个用于读取js文件并发起http然后把压缩的拼接到一个独立的js文件中去。
使用原生的nodejs的http来发起post的代码如下:
var m_http = require('http');
var m_qs = require('querystring'); var options = {
host: 'tool.css-js.com',
port: 80,
method: 'POST',
path: '/!java/?type=js&munge=true&preserveAllSemiColons=false&disableOptimizations=false',
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
}; exports.compress = function (str, callback){
var req = m_http.request(options, function(res) {
res.setEncoding('utf-8'); var compressed = '';
res.on('data', function(chunk){
compressed += chunk;
});
res.on('end', function(){
callback(compressed)
});
}); req.write(m_qs.stringify({ code: str }));
req.end();
};
有了压缩的方法,接下来我们需要提供一个可以循环读取文件夹内的所有js文件并压缩合并到独立的js文件的函数,代码大致如下:
var m_fs = require('fs');
var m_path = require('path'); //其他代码略 exports.combineDir = function (dir, output){
var self = this;
m_fs.readdirSync(dir).forEach(function (filename) {
if (filename.indexOf('.') === -1) {
self.compressDir(m_path.join(dir, filename));
return;
} var path = m_path.join(dir, filename);
m_fs.readFile(path, 'utf8', function (err, content){
if (err) {
return;
} self.compress(content, function (compressed){
var id = filename.substr(0, filename.indexOf('.'));
compressed = compressed.replace('this.define(', ['this.define(\'', id, '\','].join(''));
m_fs.appendFileSync(output, compressed);
});
});
});
};
以上代码之所以要替换'this.define'字符串是因为我们编写的兼容脚本中,会使用闭包将脚本包含在内部,并在内部对this.define进行判断,当this.define存在的情况下,才会将编码的模块赋值给module.exports来完成模块,示例代码如下:
//a.js
(function(){
var a = (function() { var foo = 1, bar = 2; return (foo + bar) }()) if (this.define) {
this.define(function (require, exports, module) {
'require:nomunge,exports:nomunge,module:nomunge';
module.exports = a;
});
}
}).call(this); //b.js
(function(){
var b = (function() { var foo = 1, bar = 2; return (foo + bar) }()) if (this.define) {
this.define(function (require, exports, module) {
'require:nomunge,exports:nomunge,module:nomunge';
module.exports = a;
});
}
}).call(this);
使用编码好的函数来进行合并后,结果如下:
(function(){var b=(function(){var c=1,a=2;return(c+a)}());if(this.define){this.define('a',function(require,exports,module){module.exports=b})}}).call(this);
(function(){var c=(function(){var d=1,b=2;return(d+b)}());if(this.define){this.define('b',function(require,exports,module){module.exports=a})}}).call(this);
扩展
对于创建请求,我们可以使用nodegrass来完成我们的功能,它内部封装了http和https的get、post的函数,简化了调用,大家可以使用看看。
其次对于循环文件夹内的js文件,当存在多层嵌套的时候,由于没有将父级文件夹添加到seajs定义的id内,因此调用合并后的js文件的时候,会出现错误,这里就不详细解说如何解决了,这个问题就留给大家去解决啦。
对于以上代码由于使用了异步方法,造成了多层文件嵌套,如果大家觉得嵌套太多导致代码难看、难以阅读,可以使用wind.js或者eventproxy.js或者其他的异步js来解决多层嵌套的问题。
结尾
这次的文章就到这里了,内容中有任何问题不吝赐教,谢谢各位!
另外感谢http://tool.css-js.com/站点提供的功能.
打包并压缩seajs代码的更多相关文章
- 使用spm build 批量打包压缩seajs 代码
一,安装环境 1.安装spm spm工具是基于node(nodejs的服务平台)的,因此我们需要先安装 node 和 npm 下载地址:http://nodejs.org/#download.下载完成 ...
- seajs代码
打包并压缩seajs代码 背景 seajs是一款优秀的模块开发插件,但是当我们使用它来进行模块化开发的时候,由于它的每个模块的加载都会进行一次http请求,那么当模块数量倍增的时候,会拖慢页面的加载速 ...
- ASP.NET MVC 静态资源打包和压缩问题小记
ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...
- ASP.NET Core Web 资源打包与压缩
本文将介绍使用的打包和压缩的优点,以及如何在ASP.NET Core应用程序中使用这些功能. 概述 在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能.通过减少从服务器请 ...
- ASP.NET Core 资源打包与压缩
ASP.NET Core 资源打包与压缩 在ASP.NET 中可以使用打包与压缩来提高Web应用程序页面加载的性能. 打包是将多个文件(CSS,JS等资源文件)合并或打包到单个文件.文件合并可减少We ...
- 关于用gulp合并压缩seaJs模块
现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享 ...
- webpack--性能优化之打包构建速度和代码调试优化
前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...
- Linux打包与压缩及tar命令详解
打包和压缩 在linux中,打包和压缩可以说是两个不同的概念,弄清这两个概念对于我们理解复杂的文件后缀有非常大的帮助 打包 将若干个文件和目录打包在一起变成一个大的文件,这时只是简单的打包,所以一 ...
- js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码
一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...
随机推荐
- duilib进阶教程 -- 总结 (17)
整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...
- java集合练习——Bank
练习:用List表示多重性 练习目标-在类中使用List作为模拟集合操作: 在本练习中,将用List实现银行与客户间的多重关系. 任务:对银行来说,可添加Bank类. Bank 对象跟踪自身与其客户间 ...
- HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像.超链接相关标签,实现图文并茂的页面 (4):会 ...
- 关于python测试webservice接口的视频分享
现在大公司非常流行用python做产品的测试框架,还有对于一些快速原型产品的开发也好,很好地支持OO编程,代码易读.Python的更新挺快的,尤其是第三方库. 对于测试人员,代码基础薄弱,用pytho ...
- Android的消息机制: Message/MessageQueue/Handler/Looper
概览 * Message:消息.消息里面可包含简单数据.Object和Bundle,还可以包含一个Runnable(实际上可看做回调). * MessageQueue:消息队列,供Looper线程 ...
- iOS:Tools:快速注释Doxygen
Xcode5有个新特性就是自己定义的函数也会被检测集成到代码提示里面,也就是在Quick Help有提示.如 /** * @brief 设置id * * @param id 要设置的id */ +(v ...
- Oracle Redo Log 机制 小结(转载)
Oracle 的Redo 机制DB的一个重要机制,理解这个机制对DBA来说也是非常重要,之前的Blog里也林林散散的写了一些,前些日子看老白日记里也有说明,所以结合老白日记里的内容,对oracle 的 ...
- 成功在神舟K650c-i7 d2(i7-4700MQ、HM87)上装好了Windows XP
成功在神舟K650c-i7 d2(i7-4700MQ.HM87)上装好了Windows XP 本来已经在K650c上装好了Windows7.Windows8双系统,奈何某些旧软件只能在Windows ...
- [算法导论]BFS @ Python
class Graph: def __init__(self): self.V = [] class Vertex: def __init__(self, x): self.key = x self. ...
- Android 数据通信
一. Http/Net1. http 通讯协议和android中相关API介绍 2.发送http请求实例[GET,POST]论坛参考文献:http://www.eoeandroid.com/viewt ...