打包并压缩seajs代码

原文地址:http://www.cnblogs.com/ahl5esoft/p/3369134.html

背景

  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/站点提供的功能.

时间: 2024-08-01 15:00:45

打包并压缩seajs代码的相关文章

关于用gulp合并压缩seaJs模块

现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享.在网上搜了下相关的资料,不得不说网上资料很多的坑(都是复制别人的...),说多都是泪.下面总结下已找到的seaJs合并压缩的几种办法,让中坑的人尽快脱坑. 第一种: 在seaJs的官网上有他自带的一个seajs-combo插件.看似不错,和minify差不多.这种方法比较简单粗暴:下载个JS文件引

ASP.NET Core 资源打包与压缩

原文:ASP.NET Core 资源打包与压缩 ASP.NET Core 资源打包与压缩 在ASP.NET 中可以使用打包与压缩来提高Web应用程序页面加载的性能. 打包是将多个文件(CSS,JS等资源文件)合并或打包到单个文件.文件合并可减少Web资源文件从服务器的所需请求数,这样可提高页面载入的性能. 压缩是将各种不同的代码进行优化,以减少请求资源文件的体积.压缩的常见方法删除不必要的空格和注释,并将变量名缩减为一个字符. bundleconfig.json文件 [ { "outputFil

打包和压缩大全

我们在处理文件的时候经常需要打包压缩,打包就是把相关文件放在一起,压缩就是放在一起所占空间太大需要调整.或者有时候我们从互联网上下载一个压缩包需要解包和解压缩.比如说windows里面我们就像有类似的操作,那么我们讨论下linux系统下如何做出相关操作. tar  cvf ab.tar a.txt  b.txt  打包 tar  xvf ab.tar 解开tar包 c创建  v详细信息f文件名x解压文件-----------------------------------------------

linux 打包和压缩的概念和区别

对于刚刚接触的人来说,一定会给Linux下一大堆各式各样的文件名 给搞晕.别个不说,单单就压缩文件为例,我们知道在Windows下最常见的压缩文件就只有两种,一是,zip,另一个是.rar.可是Linux就不同 了,它有.gz..tar.gz.tgz.bz2..Z..tar等众多的压缩文件名,此外windows下的.zip和.rar也可以在Linux下使 用,不过在Linux使用.zip和.rar的人就太少了.本文就来对这些常见的压缩文件进行一番小结,希望你下次遇到这些文件时不至于被搞晕:) 在

linux在文件打包和压缩

1. 打包和压缩文件 linux现在经常使用gzip和bzip2要压缩的文件.tar压缩文件. 经常使用的扩展: *.gz   gzip压缩文件 *.bz2  bzip2压缩的文件 *.tar   tar打包的文件,没有压缩 *.tar.gz  tar打包文件.经过gzip压缩 *.tar.bz2  tar打包文件,经过bzip2压缩 2. gzip压缩 gzip是使用最广的压缩命令.用来取代compress压缩. $ gzip -h gzip 1.3.3 (2002-03-08) usage:

linux下文件打包和压缩

1. 打包和压缩文件 linux下目前常用gzip和bzip2来压缩文件,tar打包文件. 常用扩展名: *.gz   gzip压缩的文件 *.bz2  bzip2压缩的文件 *.tar   tar打包的文件,没有压缩 *.tar.gz  tar打包文件,经过gzip压缩 *.tar.bz2  tar打包文件,经过bzip2压缩 2. gzip压缩 gzip是使用最广的压缩命令.用来代替compress压缩. $ gzip -h gzip 1.3.3 (2002-03-08) usage: gz

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

- 6.5 zip压缩工具 - 6.6 tar打包 - 6.7 打包并压缩 #  6.5 zip压缩工具 - zip压缩工具可以压缩目录 - 压缩目录需要用zip -r ``` [[email protected] d6z]# ls 1.txt.bz2  2.txt  2.txt.zip  3.txt  4.txt  aminglinux [[email protected] d6z]# zip -r aming.zip 3.txt aminglinux adding: 3.txt (defla

linux下的打包和压缩

linux中常见的两种压缩包文件的格式是.tar..gz和.tar.gz..tar仅仅是将文件简单地打包,文件的大小没有变化,也就是说.tar文件仅仅是一个包,没有被压缩:.tar.gz文件是打包后用gzip压缩得到的.文件会被压缩存放,能够减小压缩文件的大小,能够便于传输和存储:.gz文件是将一个文件用gzip压缩之后得到的压缩文件. 经常使用的文件打包和压缩的命令是tar命令和gzip命令,以下分别介绍. 1.gzip和gunzip gzip命令是用来压缩单个文件的.也就是说不能用来压缩文件

linux 打包、压缩、解压

linux下打包.压缩.解压方法: 方法一: ==打包 # tar cvf 123.tar 目录名   将目录打包为123.tar的文件  打包后并不压缩 c--创建  v--详细  f--文件  x--解压  z---对应***.gz ==压缩 # gzip etc1.tar # bzip2 etc2.tar # xz etc3.tar ==解压 # gzip -d etc1.tar.gz # bzip2 -d etc2.tar.bz2 # xz -d etc3.tar.xz ==解包 # t