前端变化太快，如今RequireJS已没法吸收眼球了。
引见一款模块加载东西：RequireJS的入门，而且重点引见其优化东西。
一、RequireJS简介
RequireJS是一个代码模块加载器。
最陈旧的时刻，前端在开辟页面的时刻，平常情况下，都是在Html文件里一次把一切会用到的JavaScript文件经由过程<script>标签援用进来。
跟着前端项目愈来愈庞杂，这类体式格局带来了很多题目：
定名争执。在之前的项目里，经常为了定名争执，涌现很多相似 comm.utils.dialog的对象名。
文件依靠。比方上述代码，假如某开辟人员要挪用dialog.js，那末必需在此之前晓得它依靠于util.js，并在dialog.js之前援用util.js，不然会报错。
更细致的请看文章前端模块化开辟的代价（https://github.com/seajs/seajs/issues/54…）
所以很多人去研讨模块化开辟，效果也不错。涌现了很多模块化计划和范例，如今有以下：
相符AMD范例，如RequireJS
相符CMD 范例，如SeaJS
NodeJS范例 CommonJS
ECMAScript 6的模块化
RequireJS就是相符AMD范例一种完成。
二、运用
官网下载RequireJS，并在页面中援用，即可享用RequireJS的一切特征。
从一个DEMO最先，此Demo没有很多逻辑，当加载某模块时在控制台打印该模块的称号。
以上是Demo的代码构造。
release：宣布目次
src：项目源代码
tools：东西目次，比方构建东西等。
点击检察完全代码
DEMO代码剖析
进口文件，main.html
暂疏忽release和tools目次，只关注src目次。
先看main.html
先引入了require.js，再引入设置信息config.js，末了是一段指导启动代码。此Demo的启动代码，在require函数的第一个参数里传入它所须要的模块，one和two，而不须要体贴它们离别依靠于什么
设置文件config.js
引入require.js后，须要先举行设置，比方baseUrl是指加载资本时，是相对此途径的资本。
定义模块
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的入门要关注四样东西
页面援用 require.js
在运用require函数前，运用require.config要领设置途径等信息
运用require函数加载模块
运用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…
优化一：兼并文件
在src/js下新建combine.js，内容为空都能够。
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…
我在深圳，迎接关注我的民众号
