requireJS对文件合并与压缩(二)
requireJS对文件合并与压缩
RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler。r.js下载
requireJS对互相依赖模块进行合并与压缩,可以对JS,CSS压缩,甚至可以对整个项目进行打包。r.js是基于nodeJS的,所以本机电脑上需要有node环境。
下面还是来看看我整个项目结构吧,如下:
现在是这样的,app/a.js,app/b.js,app/c.js,app/d.js,有依赖关系,分别是a依赖于b,b依赖于c,c依赖于d,入口文件app.js,
代码如下:
a.js
define(["app/b"],function (b) {
return {
"name":1
}
});
b.js
define(function(require, exports, module) {
var c = require('app/c');
});
c.js
define(function(require, exports, module) {
var d = require('app/d');
});
d.js
define(function(require, exports, module) {
alert(1);
});
app.js
require(['app/a'],function(jq){
});
如果我不压缩与合并代码,那么我们在浏览器下看请求如下:
现在我们一步步来解释下合并与压缩吧!
一:打开cmd命令窗口,进入项目requirejs内,如下:
执行命令 node r.js –o baseUrl=js name=app out=build.js命令即可,如上所示已经在根目录下生成build.js了,我们下面再来看看目录结构如下:
下面我们再来看看build.js代码了,如下所示:
define("app/d",["require","exports","module"],function(e,t,n){alert(1)}),define("app/c",["require","exports","module","app/d"],function(e,t,n){var r=e("app/d")}),define("app/b",["require","exports","module","app/c"],function(e,t,n){var r=e("app/c")}),define("app/a",["app/b"],function(e){return{name:1}}),require(["app/a"],function(e){}),define("app",function(){});
已经对app.js,app/a.js,app/b.js,app/c.js,app/d.js,的代码进行合并与压缩了。
接着我们在index.html代码要如下调用:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="require.js" defer async="true" data-main="build"></script>
</head>
<body>
</body>
</html>
直接从build.js内进行加载,现在我们再来看看浏览器内的请求如下所示:
现在只有2个请求了,且也可以执行里面的代码了。
下面我们对命令分别来做一下解释:
-o: 表示优化,该参数是固定的,必选。
baseUrl:指存模块的根目录,可选。
name: 模块的入口文件,这里是app,那么r.js会从baseUrl+name去查找app.js,然后找出所有依赖的模块,然后进行合并与压缩。
out: 指合并压缩后输出的文件路径,这里是直接输出在根目录下build.js 我们也可以输出到其他目录下 比如js/app 目录下,也可以的。
上面的demo已经可以对有依赖的模块进行合并与压缩了,但是目前还不能满足我们的需求,因为代码已经合并且压缩了,对于我们调式代码并不是很方便,所以我接下来给大家来介绍另外1个参数:
1. optimize(none/uglify/colsure),指定是否压缩,默认为uglify。
我们可以指定为none,只合并不压缩。代码如下:
命令如下:
node r.js –o baseUrl=js name=app out=build.js optimize=none.
现在我们再来看看build.js文件代码截图如下:
现在是所有的js文件在一个目录下,那如果js文件在不同的文件夹下面呢?是不是也可以合并呢?当然可以,只要指定依赖就可以了,我们再来演示下。加入我现在js目录下在新建一个文件叫app2,,如下所示:
现在在app2目录下新建一个js文件,假如叫e.js,那么在app目录下的d.js代码要改成如下了:
define(function(require, exports, module) {
var d = require('app2/e');
});
对app2/e.js进行依赖即可。
我们再来运行下命令如下所示:
如上可以看到e.js也被合并与压缩了。
上面的是直接敲打命令,我们现在也可以先安装r.js,安装如下:
npm install –g requirejs
如下所示表示已经安装成功了。
除了上面直接在命令行提供参数设置以外,也可以将参数写入一个文件,假定配置名称为config.js,
代码如下:
({
baseUrl: "js",
name: "app",
out: "app-built.js"
})
然后进入相应的目录,在命令行下使用r.js来运行config.js文件,如下所示:命令:node r.js -o config.js
我们再看看生成文件app-built.js,
在页面上引入这个文件也可以了。
requireJS对文件合并与压缩(二)的更多相关文章
- RequireJS对文件合并与压缩实现方法
RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...
- AngularJS结合RequireJS做文件合并压缩的那些坑
我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...
- 优化RequireJS项目(合并与压缩)
关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦 干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系的J ...
- 优化 RequireJS 项目(合并与压缩) 【已翻译100%】
英文原文:Optimize (Concatenate and Minify) RequireJS Projects 标签: RequireJS Node.js 参与翻译 (1人) : 裴宝亮 本文将演 ...
- grunt配置太复杂?使用Qbuild进行文件合并、压缩、格式化等处理
上次简单介绍了下Qbuild的特点和配置,其实实现一个自动化工具并不复杂,往简单里说,无非就是筛选文件和处理文件.但Qbuild的源码也并不少,还是做了不少工作的. 1. 引入了插件机制.在Qbuil ...
- js文件合并,压缩,缓存,延迟加载
做web前段也有一段时间了,对于web中js文件的加载有些体会想跟大家一起分享一下. 1.首先说说js文件的合并和压缩吧 为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并 ...
- django 实现指定文件合并成压缩文件下载
需求是在一列学生列表中选择指定的学生,然后下载他们上传的报告文档.
- 用GruntJS合并、压缩JS文件
为什么要合并.压缩你的JS文件? 一个项目开发完成我们总能发现有一堆js文件非常混乱. 一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加 ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
随机推荐
- 算法(Python)
算法就是为了解决某一个问题而采取的具体有效的操作步骤 算法的复杂度,表示代码的运行效率,用一个大写的O加括号来表示,比如O(1),O(n) 认为算法的复杂度是渐进的,即对于一个大小为n的输入,如果他的 ...
- select控件自动触发change事件
这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...
- Java VS .NET:Java与.NET的特点对比
一.前言 为什么要写Java跟.NET对比? .NET出生之后就带着Java的影子.从模仿到创新,.NET平台也越来越成熟.他们不同的支持者也经常因为孰弱孰强的问题争论不休.但是本文并不是为了一分高下 ...
- eclipse设置author等注释
windows--> preference--> PyDev --> Editor --> Templates 点击New,新建一个template,输入name(之后选择这个 ...
- java傻瓜简单100%一定看的懂新手安装教程
1.java官网 最新的不是很稳定 http://www.oracle.com/technetwork/java/javase/downloads/index.html 一直点下一步就可以,但别忘 ...
- 》》jquery-weui 初
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- java 的equals 与== ,null与isempty的区别
1 . == 是为了判断等号两边 变量 所对应 的 内存中的 值 是否 相等, 只是 值 的比较. 2. 假如 String s1 = new String("abc") ...
- 湘潭大学1185 Bob's Problem
Bob's Problem Accepted : 114 Submit : 589 Time Limit : 1000 MS Memory Limit : 65536 KB 题目描写叙述 Bo ...
- Error code:1728 Cannot load from mysql.proc. The table is probably corrupted
Error code:1728 Cannot load from mysql.proc. The table is probably corrupted http://bugs.mysql.com/b ...
- Woody的Python学习笔记1
Python 是一种解释性语言:这意味着开发过程中省去了编译这个环节,类似于PHP\Perl. Python 是交互式语言:这意味着你能够在一个python提示符,直接互动运行写你的程序. Pytho ...