【前端构建】RequireJS及其优化工具

前端变化太快，如今RequireJS已经无法吸引眼球了。
介绍一款模块加载工具：RequireJS的入门，并且重点介绍其优化工具。

一、RequireJS简介

RequireJS是一个代码模块加载器。
最古老的时候，前端在开发页面的时候，一般情况下，都是在Html文件里一次把所有会用到的JavaScript文件通过<script>标签引用进来。

随着前端项目越来越复杂，这种方式带来了很多问题：

1. 命名冲突。在以前的项目里，经常为了命名冲突，出现很多类似 comm.utils.dialog的对象名。

2. 文件依赖。例如上述代码，如果某开发人员要调用dialog.js，那么必须在此之前知道它依赖于util.js，并在dialog.js之前引用util.js，否则会报错。

更详细的请看文章前端模块化开发的价值（https://github.com/seajs/seajs/issues/54...）

所以很多人去研究模块化开发，成果也不错。出现了许多模块化方案和标准，目前有以下：

1. 符合AMD规范，如RequireJS

2. 符合CMD 规范，如SeaJS

3. NodeJS规范 CommonJS

4. ECMAScript 6的模块化

RequireJS就是符合AMD规范一种实现。

二、使用

官网下载RequireJS，并在页面中引用，即可享用RequireJS的所有特性。

从一个DEMO开始，此Demo没有很多逻辑，当加载某模块时在控制台打印该模块的名称。

以上是Demo的代码结构。

• release：发布目录

• src：项目源代码

• tools：工具目录，例如构建工具等。
  点击查看完整代码

DEMO代码分析

1. 入口文件，main.html
   暂忽略release和tools目录，只关注src目录。

先看main.html

先引入了require.js，再引入配置信息config.js，最后是一段引导启动代码。此Demo的启动代码，在require函数的第一个参数里传入它所需要的模块，one和two，而不需要关心它们分别依赖于什么

1. 配置文件config.js
   引入require.js后，需要先进行配置，例如baseUrl是指加载资源时，是相对此路径的资源。

1. 定义模块
   require函数的加载对象是模块，对于requireJS来说，一个文件定义一个模块。那么怎么定义模块呢？

使用define函数定义，例如two.js里的代码是：

其中return的对象是该模块对外曝露的接口，调用方require此模块后，可使用此对象所定义的所有方法和属性。

运行DEMO
使用Chrome运行src/main.html，先后初始化了three，one，two等三个模块。如下图

网络请求是这样的

main.html通过script标签加载require.js和config.js，然后启动代码通过require函数加载 one.js和two.js，two.js通过require函数加载它所依赖的three.js。

requireJs的入门要关注四样东西

1. 页面引用 require.js

2. 在使用require函数前，使用require.config方法配置路径等信息

3. 使用require函数加载模块

4. 使用define函数定义模块

三、优化工具

以上是RequireJS最基本的使用方法。然而，它还提供了优化工具，用于提升性能，此优化工具为 r.js（http://requirejs.org/docs/optimization.h...）

requireJS认为一个文件只能定义一个模块。然而，有些模块很小，分开文件来开发虽然有利于源代码的维护和可读性，但却不利于浏览器环境下的加载，因此会有一些合并代码的需求，即将几个模块合并到一个文件里，例如如果一个工程里使用到了jquery和backbone等第三方代码库，而且又是常常一起使用的，那么在发布之前就可以把它们合并成一个文件。

另外，前端代码发布前都会进行压缩，使文件足够小。因此，现在介绍一下如何使用r.js的优化工具实现此两点述求。

安装与使用

• 下载r.js。

• 安装NodeJS和NPM，官网去下载安装包即可

同样是上一节的Demo，我们要合并one.js和two.js，同时压缩所有的代码。
以下文件目录中
tools里面的r.js是优化工具的代码库；而build.js是配置文件
src/js目录下多了一个combine.js文件。此文件用于存放合并后的代码。

配置文件
优化工具根据配置文件进行优化，即tools里面的build.js。

配置选项有很多，详情请看
https://github.com/jrburke/r.js/blob/mas...

优化一：合并文件

1. 在src/js下新建combine.js，内容为空都可以。

2. tools/build.js里配置要合并的config.modules。

命令行cd到tools目录
执行 node r.js –o build.js

从输出的信息看来，combine.js合并了one.js，three.js和two.js。
但我们在tools/build.js里明明配置的是合并one和two。原来是因为two.js里require了three.js，所以优化工具把three.js也合并进来了。那么如果我本意其实并不想把three.js合并进来呢？

Rjs的合并策略：传入define，require的模块参数如果是直接量就会合并，如果是变量那么不合并，例如
Two.js里require(‘three’)这样加载，three.js是会被合并到combine.js的，而如果是var mod=”three”; require(mod)，那么three.js是不会被合并的。

优化二：代码压缩
默认情况下，优化工具是会压缩代码，但是如果某些情况下不想压缩可以，在tools/build.js里关掉，即optimize选项设置为none。

运行结果
编译后的release目录文件：

运行release/main.html，同样在控制台打印了加载的模块名称，即实现了跟之前src/main.html一样的功能。

但是，不再单独加载 one.js、two.js和three.js了，而是只加载 combine.js

至此结束，只会用requireJS是不够的，优化工具会使你的程序性能得到提升。

而优化工具要用好，要多尝试他们的配置选项。http://requirejs.org/docs/api.html#confi...

我在深圳，欢迎关注我的公众号