RequireJS 文件合并压缩
RequireJS的define 以及require 对于我们进行简化JavaScript 开发，进行模块化的处理具有很大的帮助
但是请求加载的js 文件会有一些影响，一般的处理是对于文件进行压缩，但是requirejs 的压缩不是简单的
进行压缩就行。
RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大，不但可以压缩js，css，甚至
可以对整个项目进行打包。
使用的方法为：
1. 项目结构
文件说明：
model 中的为 定义的模块
main.js 为页面加载需要使用的
appinfo.js 内容为：
define(function () {
var appinfo = { name: "dalnog", age: 22 };
return appinfo;
});
refjs.js 内容为：
define(["model/user"], function (user) {
var myinfo = {
userinfo: user
};
return myinfo;
});
user.js 内容为：
define(function () {
var user = { name: "dalnog", age: 22 };
return user;
});
index.htm 页面信息如下：
<!DOCTYPE >
<html >
<head>
<title></title>
</head>
<body> // 压缩的使用方法
<!-- <script data-main="dalongappinfo-built" src="Scripts/require.js" type="text/javascript"></script>--> // 默认的使用方法
<script data-main="main" src="Scripts/require.js" type="text/javascript"></script>
</body>
</html>
压缩的方法：
1. 安装node
2. 运行npm 安装 requirejs 自带r.js
命令为： npm install -g requirejs
3. 配置 命令文件 config.js
信息为：
({
baseUrl: ".", /// 文件的路径
name: "main", /// 入口文件 就是main.js
/// 实际压缩之后使用的js 文件
out: "dalongappinfo-built.js"
})
4. 运行命令 node r.js -o config.js
之后生成对应的文件： dalongappinfo-built.js
5. 使用：
见上面的 index.htm
命令参数解析：
下面我们对命令分别来做一下解释：
-o： 表示优化，该参数是固定的，必选。
baseUrl：指存模块的根目录，可选。
name： 模块的入口文件，这里是app,那么r.js会从baseUrl+name去查找app.js，然后找出所有依赖的模块，然后进行合并与压缩。
out: 指合并压缩后输出的文件路径，这里是直接输出在根目录下build.js 我们也可以输出到其他目录下 比如js/app 目录下，也可以的。
RequireJS 文件合并压缩的更多相关文章
- AngularJS结合RequireJS做文件合并压缩的那些坑
我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...
- 使用grunt完成requirejs的合并压缩和js文件的版本控制
最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...
- gulp 之一 安装及简单CSS，JS文件合并压缩
最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...
- 使用System.Web.Optimization对CSS和JS文件合并压缩
在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...
- System.Web.Optimization 合并压缩技术的使用
捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.A ...
- 使用gulp对js、css、img进行合并压缩
1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...
- gulp合并压缩
1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’); 接下来,只要conca ...
- requireJS对文件合并与压缩（二）
requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...
- RequireJS对文件合并与压缩实现方法
RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...
随机推荐
- Android.mk中添加宏定义
在Boardconfig.mk 中添加一个 IS_FLAG := true 由于Boardconfig.mk和各目录的Android.mk是相互关联的 所以我们可以在Android.mk 中添加 一个 ...
- Bootstrap全局css
HTML中的所有标题标签,<h1>到<h6>均可使用.另外,还提供了.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式.在标题内还可以包含<small ...
- UI基础:DataPersistent.沙盒
沙盒是系统为每一个应用程序生成的一个特定文件夹,文件夹的名字由一个十六进制数据组成,每一个应用程序的沙盒文件名都是不一样的,是由系统随机生成的. 沙盒主目录: NSString *homePath = ...
- C语言基础:进制转换,变量,常量,表达式,基本数据类型,输出函数,输入函数,运算符. 分类： iOS学习 c语言基础 2015-06-10 21:39 25人阅读 评论(0) 收藏
二进制:以0b开头,只有0和1两种数字.如0101 十进制:0~9十个数字表示.如25 十六进制:以0~9,A~F表示,以0X开头.如0X2B 十进制转换为X进制:连除倒取余 X进制转换为十进制:按权 ...
- 12、C#基础整理（结构体）
结构体 1.概念: 结构体是写在main函数外的数据结构,由不同类型的数据组合成一个整体,这些组合在一个整体中的数据是互相联系的 2.声明方式: struct 结构体名 { 成员变量(由类型名+成员名 ...
- 3、C#基础整理（语句概述）
语句 语句分为四个大类: * 分支语句:if,if... else,if ...else if... else,switch case * 循环语句:for,while,do while,foreac ...
- 7、网页制作Dreamweaver（悬浮动态分层导航）
悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...
- hdu5853 （后缀自动机）
Problem Jong Hyok and String 题目大意 给你n个字符串,有q个询问. 定义set(s)={(i,j)} 表示 s在第i个字符串中出现,且末尾位置为j. 对于一个询问,求se ...
- HDU 5092
http://acm.hdu.edu.cn/showproblem.php?pid=5092 卡读题,实质是每行取一个点,从上到下找一条路径权值和最小,点可以到达的地方是周围八个格子 类似数塔的dp, ...
- Inno Setup 插件大全
Inno Setup 插件大全 这是我收集到的目前网上最全的插件之一,里面的每个插件,都有详细的脚本示例来讲解该插件的具体用法.另外,下载了我公开的脚本的朋友,也有可能会被提示缺少文件,如果缺 ...