【前端構建】RequireJS及其優化工具

前端變化太快，現在RequireJS已經沒法吸引眼球了。
介紹一款模塊加載工具：RequireJS的入門，而且重點介紹其優化工具。

1、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規範一種實現。

2、使用

官網下載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函數定義模塊

3、優化工具

以上是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...

我在深圳，歡迎關注個人公衆號