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 文件合并压缩的更多相关文章

  1. AngularJS结合RequireJS做文件合并压缩的那些坑

    我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...

  2. 使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...

  3. gulp 之一 安装及简单CSS，JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

  4. 使用System.Web.Optimization对CSS和JS文件合并压缩

    在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...

  5. System.Web.Optimization 合并压缩技术的使用

    捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.A ...

  6. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  7. gulp合并压缩

    1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’);  接下来,只要conca ...

  8. requireJS对文件合并与压缩（二）

    requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...

  9. RequireJS对文件合并与压缩实现方法

    RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...

随机推荐

  1. ie7下 滚动条内容不动问题

    ie7+ 版式正常 ie7滚动内容不跟着动 解决方法 加上 overflow-x: hidden;    overflow-y: auto;    *position:relative;    *le ...

  2. C# 如何执行bat文件 传参数

    C# 如何执行bat文件 传参数 分类: C# basic 2011-04-25 18:55 3972人阅读 评论(0) 收藏 举报 c#stringpathoutput Process p = ne ...

  3. 301、404、200、304、500等HTTP状态，代表什么意思?

    一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务器超时 下面提供 HTTP 状态码的完整列表.点击链接可了解详情.您也可以访问 HTTP 状态码上的 ...

  4. 《MORE EFFECTIVE C++》条款20 条款21

    条款20 协助编译器实现返回值优化 当重载运算符的时候,比如+ - * / 这类运算符,该函数返回的值一定是个右值(即不能是引用),那么执行一次运算的开销可能会在临时对象上调用多次构造函数和析构函数, ...

  5. Open vSwitch FAQ (二)

    Configuration Problems Q: I created a bridge and added my Ethernet port to it, using commands like t ...

  6. SPAdes

    用后感: 拼个小基因组还好,对于很大的基因组,文库很多的,还是不要用了.服务器768G内存,都不够用.... 主页: http://bioinf.spbau.ru/spades 说明书: http:/ ...

  7. archlinux下查看机器的ip地址

    问题原因 默认archlinux没有安装ifconfig这个在其它发行版中常用的命令,刚开始不知道怎么查看机器的ip. 解决方案 使用archlinux中已经安装的ip命令.在后面跟上addr, ro ...

  8. .NET 里 静态方法的并发处理

    静态方法在程序运行时 就已经实例化好了 不管多少用户并发 都一样处理,不需要排队等待,实例代码: namespace DotNet.Example { using DotNet.BaseManager ...

  9. 十日谈 (share)

    @拔赤 一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师 ...

  10. abap append 用法

    [转自http://blog.chinaunix.net/uid-7982817-id-91999.html]Append用法总结 2008-11-14 11:42:19 分类: Syntax APP ...