spmjs / spm

Brand new static package manager.
http://spmjs.io
Other
903 stars 179 forks source link

第三方库如何压缩到业务JS文件中 #642

Closed zhaoqingqing closed 11 years ago

zhaoqingqing commented 11 years ago

各位好,下面是我的项目目录截图, com_dir common目录是第三方类库,包括underscore,jq.mobi,sock.io等 seajs目录下是seajs相关的文件

js目录下是业务功能JS,每一个JS文件都是由一个define定义,例如:

app.js define(function (require, exports) { var Class = require('common/libs/class').Class, config = require("config/config"), Storage = require('js/storage'),

$ = require('jqmobi');

game.js define( function (require, exports, module) { var Class = require("common/libs/class").Class, Player = require("js/player"), Renderer = require("js/renderer"), Room = require("config/room"), GameClient = require("js/gameClient"), HELPER = require("common/common"), Lang = require("common/lang").Lang, $ = require('jqmobi'),

hex_md5=require('md5');

renderer.js define(function (require, exports) { var Class = require("common/libs/class").Class, PlayerClass = require("js/player"), room = require("config/room"), helper = require("common/common"), lang = require("common/lang").Lang,

$ = require('jqmobi');

等等,JS目录下的其它JS文件和上面的定义方式是一样的 seajs的config.js配置如下: seajs.config({ // base:'assets/seajs/', // 配置别名 alias:{ 'jqmobi':'common/libs/jqmobi.min.js', 'underscore': 'common/libs/underscore.min.js', 'socket': 'common/libs/socket.js', 'md5': 'common/libs/md5-min.js', 'pokerjs': 'common/libs/poker.min.js' }, // 加载 shim 插件 plugins:['shim'], // 配置 shim 信息,这样我们就可以通过 require('jqmobi') 来获取 jq shim:{ 'jqmobi':{ exports:'jq' }, 'underscore':{ exports:'_' }, 'socket':{ exports:'io' }, 'md5':{ exports:'hex_md5' }, 'pokerjs':{ // exports:'CanvasRenderingContext2D' exports:'Poker' } }, // 文件编码 charset: 'utf-8' }); html页面的导入:

请教大家,在项目上线之后,应该怎样布署能减少客户端的请求数? 我是想把JS目录下的文件和common目录下的第三方类库压缩到一个init的js文件中例如:这个网站所压缩的 boya_init 这样应该对减少JS文件请求数比较有帮助吧。 我使用 spm deploy --src=js --to=/ 进行压缩,所得到的结果只是把JS目录下的所有文件合并到一个init.js的文件中,但并没有提取出id和依赖,所以是不成功的 deploy_combine

向各位请教,我该如何进行压缩呢?

我的package.json文件如下: { "name":"dn", "root":"abcgame", "dependencies":{ "jqmobi":"common/libs/jqmobi.min.js", "underscore": "common/libs/underscore.min.js", "socket": "common/libs/socket.js", "md5": "common/libs/md5-min.js", "pokerjs": "common/libs/poker.min.js" }, "combine":{ "init.js":["app.js","detect.js","game.js","gameClient.js","gametypes.js","main.js","player.js","renderer.js","storage.js"] }, "output":{ "app.js":"." } } 第三方类库的依赖配置对了吗?dependencies 我压缩的init.js文件中没有把第三方类库压缩进来例如: http://html5.boyaa.com/texas/wyxsms/game.html F12查看它的源文件中,他们把所有的js文件都压缩到一个init.js的文件中,页面就请求一个init.js进来,init.js包括jquery,及jquery ui, iscroll,这样的请求数应该是非常少的 向各位请教,我要如何处理第三方类库压缩到一个JS文件中呢?感谢大家!

afc163 commented 11 years ago

请好好排版。。。 http://daringfireball.net/projects/markdown/syntax

leoner commented 11 years ago

你的项目目录和目前标准的 spm 的使用出入比较大,而且你的需求也比较简单建议可以使用 https://github.com/spmjs/cmd-util 这个模块,然后自己可以定制你的这个功能。 主要开发点:

  1. 遍历你所有的 js, 然后根据你的 base 路径,生成相应的 id. 比如 app.js id 可能就是 js/app.js.
  2. 然后使用 cmd-util 提供的 ast.js 可以 parse 出模块的依赖。这样就可以产生出相应的依赖列表。
  3. 然后把产生的文件合并起来,在压缩就行了。
zhaoqingqing commented 11 years ago

SPM的 base 路径我这样配置: "devDependencies": { "base":"js", "jqmobi":"common/libs/jqmobi.min.js", "underscore": "common/libs/underscore.min.js", "socket": "common/libs/socket.js", "md5": "common/libs/md5-min.js", "pokerjs": "common/libs/poker.min.js" }, SPM压缩之后,提取不出ID,压缩之后,只是文件进行了物理地合并,没有提取出ID,如下:

define(function (require, exports){...............} define(function (require, exports){...............} define(function (require, exports){...............} define(function (require, exports){...............} define(function (require, exports){...............} define(function (require, exports){...............} define(function (require, exports){...............} ......................... 自己写的JS文件合并压缩到一个int.js的文件中 怎样使用 cmd-util 提供的 ast.js , parse 出模块的依赖。产生出相应的依赖列表。 2013-02-27

赵青青

发件人:"hui.kang" notifications@github.com 发送时间:2013-02-26 22:41 主题:Re: [spm] 第三方库如何压缩到业务JS文件中 (#642) 收件人:"spmjs/spm"spm@noreply.github.com 抄送:"zhaoqingqing"569032731@qq.com

你的项目目录和目前标准的 spm 的使用出入比较大,而且你的需求也比较简单建议可以使用 https://github.com/spmjs/cmd-util 这个模块,然后自己可以定制你的这个功能。 主要开发点:

  1. 遍历你所有的 js, 然后根据你的 base 路径,生成相应的 id. 比如 app.js id 可能就是 js/app.js.
  2. 然后使用 cmd-util 提供的 ast.js 可以 parse 出模块的依赖。这样就可以产生出相应的依赖列表。
  3. 然后把产生的文件合并起来,在压缩就行了。 — Reply to this email directly or view it on GitHub.
leoner commented 11 years ago

https://github.com/perfectworks/grunt-cmd-combo 建议看下这个是否能满足需求?