为了应对日益复杂，大规模的JavaScript开发。我们化整为零，化繁为简。将复杂的逻辑划分一个个小单元，各个击破。这时一个项目可能会有几十个甚至上百个JS文件，每个文件为一个模块单元。如果上线时都是这些小文件，那将对性能造成一定影响。

RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大，不但可以压缩js，css，甚至可以对整个项目进行打包。

r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS（jQuery也是使用它压缩）。此外r.js需要node.js环境，当然它也可以运行在Java环境中如Rhino。

这篇以一个简单的示例来感受下r.js，创建的目录如下

和入门之三目录结构一样，写了三个模块cache，event，selector。这三个模块的代码就不在贴了。main.js也未做修改，实现的功能仍然是为页面上的所有段落P元素添加个点击事件，点击后弹出P的innerHTML。唯一的区别是目录中多了个r.js。

index.html做了修改，如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
    <head>
        <title>requirejs进阶（一）</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            p {
                background: #999;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p>
        <script data-main="built" src="require.js"></script>
    </body>
</html>

注意，data-main改为了“built”，上一篇的是“main”。我们将使用r.js把js目录下的cache.js，event.js，selector.js，main.js合并压缩后写到r4目录中。

好，让我们开始合并压缩吧。

1，打开windows命令窗口，cd到r4目录中  ~~r4/r.js

2，输入命令

node r.js -o baseUrl=js name=main out=built.js  ~~~ baseUrl=js out=built.js(这2个参数的路径都是相对于E:\work\req\r4 即命令行的当前工作目录 echo %cd%)  name=main（main应该是相对baseurl的)

命令行信息可以看到已经将各个js文件合并成功了。这时回到r4目录会发现多了一个built.js文件。

好了，合并压缩过程完成了。

把目录r4放到apache或其它web服务器上，访问index.html。网络请求如下

可以看到除了require.js，就只有built.js了。大大减少了JS文件的http请求。这时点击页面上各个P元素，会弹出对应的innerHTML

这说明功能完损无缺。

下面对命令行做个简单解释。
node r.js -o baseUrl=js name=main out=built.js

-o         表示优化，该参数是固定的，必选。
baseUrl  指存放模块的根目录，这里是r4/js，因为cd到r4中了，只需设置为js。可选，如果没有设置将从r4中查找main.js。
name     模块的入口文件，这里设置成“main”，那么r.js会从baseUrl+main去查找。这里实际是r4/js/main.js。r.js会分析main.js，找出其所依赖的所有其它模块，然后合并压缩。
out        指合并压缩后输出的文件路径，这里直接是built.js，那么将输出到根目录r4下。

好了，再介绍两个参数

1，excludeShallow 合并时将排除该文件

node r.js -o baseUrl=js name=main out=built.js excludeShallow=selector

可以看到输出信息中不再包括selector.js。这时运行index.html页面，会发现selector.js被单独请求下来了。

2，optimize (none/uglify/closure)  指定是否压缩，默认为uglify
不传该参数时r.js默认以UglifyJS压缩。设置为none则不会压缩，仅合并，这在开发阶段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none

这时生成的built.js是没有压缩的。

总结：
这篇演示了采用模块开发后上线前的一个小示例：把所有模块文件合并为一个文件。

先下载r.js放到开发目录中，然后使用命令行来合并压缩。其中演示了命令行参数-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必选的，其它为可选。

转:requirejs打包压缩r.js使用示例的更多相关文章

  1. 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)

    这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...

  2. requirejs的打包工具r.js

    不建议用命令行,还是用配置文件比较方便--build.js. 我的build.js文件内容大概如下: ( { appDir : './', baseUrl : './scripts', dir : ' ...

  3. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  4. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  5. [one day one question] webpack打包压缩 ES6 js、.vue报错

    问题描述: 报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js ...

  6. r.js压缩打包（require + backbone）项目开发文件

    最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...

  7. r.js压缩打包

    AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...

  8. require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式

    require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式 时间:2017-07-03 17:18:11      阅读:210      评论:0      收藏:0 ...

  9. r.js结合gulp等于webpack（angular为例）

    本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...

随机推荐

  1. linux 使用ssh到远端并且使用while的坑

    如果要使用ssh批量登录到其它系统上操作时,我们会采用循环的方式去处理,那么这里存在一个巨大坑,你必须要小心了. 现在是想用一个脚本获取远程服务器端/root下面的文件: #!/bin/bash ca ...

  2. Linux系统源码安装过程中的prefix选项

    在linux和unix环境中,源码安装是最常用的软件安装方式,一些软件除了提供源码外,也提供各种发行版的二进制安装包(如基于redhat包管理工具的rpm包),但强烈建议使用源码安装方式.原因是:(1 ...

  3. 3. 表单输入框 在 IE 中 会有 “X” 和 类似wifi图标的图标出现

    原因: IE 自动给 input加了伪类 ::ms-clear 和 ::ms-reveal 解决: input::ms-clear, input::ms-reveal { display: none; ...

  4. Ubuntu_16.04 配置 Apache Rwrite URL 重写

    Ubuntu Apache配置Rwrite URL重写 0. apache目录

  5. 一个label 里面 显示中文和英文不同颜色

    - (void)viewDidLoad {    [super viewDidLoad];    self.view.backgroundColor = [UIColor yellowColor];  ...

  6. Android应用开发基础篇（12）-----Socket通信

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/03/2378669.html 一.概述 网络通信无论在手机还是其他设备上都应用得非常广泛,因此掌 ...

  7. RAW模板命名规范

    国有国法,家有家规,任何一种开发都要有自己规范,RAW模板也一样,这个文章来介绍一下RAW模板命名的规范. 格式: 开发者或组织_描述词_名称 开发者或组织:如know或自己的组织名 描述词:c-&g ...

  8. [LeetCode]题解（python）：006-ZigZag Conversion

    题目来源: https://leetcode.com/problems/zigzag-conversion/ 题意分析: 这道题目是字符串处理的题目.输入一个字符串和一个数字,将字符串填入倒Z形输入字 ...

  9. win7下Java环境变量配置及说明

    在官网上下载与操作系统对应的JDK(http://www.oracle.com/index.html) 比如我的安装路径是E:\jdk1.7.0_51\JDK 右击计算机---->属性----& ...

  10. hadoop配置及无法移动文件到hdfs故障解析

    首先博主用的64位ubuntu,hadoop官方只提供32位版本,这样的话启动本地库无法兼容,需要自己编译为64位版本,或下载别人编译好的64位版本. 下载好需要在etc/hadoop目录下改动以下几 ...