如何優(yōu)化RequireJS項(xiàng)目

本篇內(nèi)容主要講解“如何優(yōu)化RequireJS項(xiàng)目”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何優(yōu)化RequireJS項(xiàng)目”吧!

本文將演示如何合并與壓縮一個(gè)基于RequireJS的項(xiàng)目。本文中將用到苦干個(gè)工具，這其中就包括Node.js。 因此，如果你手頭上還沒有Node.js可以點(diǎn)擊此處下載一個(gè)。

動(dòng)機(jī)

關(guān)于RequireJS已經(jīng)有很多文章介紹過了。這個(gè)工具可以將你的JavaScript代碼輕易的分割成苦干個(gè)模塊(module)并且保持你的代碼模塊化與易維護(hù)性。這樣，你將獲得一些具有互相依賴關(guān)系的JavaScript文件。僅僅需要在你的HTML文檔中引用一個(gè)基于RequireJS的腳本文件，所有必須的文件都將會(huì)被自動(dòng)引用到這個(gè)頁面上。

但是，在生產(chǎn)環(huán)境中將所有的JavaScript文件分離，這是一個(gè)不好的做法。這會(huì)導(dǎo)致很多次請(qǐng)求(requests)，即使這個(gè)些文件都很小，也會(huì)浪費(fèi)很多時(shí)間。 可以通過合并這些腳本文件，以減少請(qǐng)求的次數(shù)達(dá)到節(jié)省加載時(shí)間的目的。

另一種節(jié)省加載時(shí)間的技巧是縮小這些被加載文件的大小，相對(duì)小一些的文件會(huì)傳輸?shù)母煲恍＿@個(gè)過程叫作最小化 (minification) ，它是通過小心的改變腳本文件的代碼結(jié)構(gòu)并且不改變代碼的形為(behavior)和功能(functionality)來實(shí)現(xiàn)的。例如這些：去除不必要的空格，縮短(mangling，或都?jí)嚎s)變量(variables)名與函數(shù)(methods，或者叫方法)名，等等。這種合并并壓縮文件的過程叫做代碼優(yōu)化( optimization)。這種方法除了用于優(yōu)化(optimization)JavaScript文件，同樣適用于CSS文件的優(yōu)化。

RequireJS有兩個(gè)主要方法(method): define()和require()。這兩個(gè)方法基本上擁有相同的定義(declaration) 并且它們都知道如何加載的依賴關(guān)系，然后執(zhí)行一個(gè)回調(diào)函數(shù)(callback function)。與require()不同的是， define()用來存儲(chǔ)代碼作為一個(gè)已命名的模塊。 因此define()的回調(diào)函數(shù)需要有一個(gè)返回值作為這個(gè)模塊定義。這些類似被定義的模塊叫作AMD (Asynchronous Module Definition，異步模塊定義)。

如果你不大熟悉RequireJS或者不太明白我寫的東西 – 不要擔(dān)心。下面有一個(gè)關(guān)于這些的例子。

JavaScript應(yīng)用程序的優(yōu)化

在本小節(jié)中我將向大家展示如何優(yōu)化Addy Osmani的TodoMVC Backbone.js + RequireJS 項(xiàng)目。 由于TodoMVC項(xiàng)目在不同的框架下包含許多TodoMVC實(shí)現(xiàn)，我下載了1.1.0版并提取出Backbone.js + RequireJS應(yīng)用程序。點(diǎn)擊這里下載該應(yīng)用程序并解壓下載到的zip文件。todo-mvc的解壓目錄將是我們這個(gè)例子的根目錄(root path)，從現(xiàn)在起我將把這個(gè)目錄引用為<root>。

查看<root>/index.html的源代碼，你會(huì)發(fā)現(xiàn)它僅僅包含了一個(gè)script標(biāo)簽（另外一個(gè)是當(dāng)你使用Internet Explorer時(shí)引用的）：

index.html引用腳本文件的代碼

<script type="text/javascript" src="js/lib/require/require.js" data-main="js/main"></script>  <!--[if IE]>      <script src="js/lib/ie.js"></script>  <![endif]-->

其實(shí)，整個(gè)項(xiàng)目只需要引用require.js這個(gè)腳本文件。如果你在瀏覽器中運(yùn)行這個(gè)項(xiàng)目，并且在你喜歡的（擅長(zhǎng)的）調(diào)試工具的network標(biāo)簽中， 你就會(huì)發(fā)現(xiàn)瀏覽器同時(shí)也加載了其它的JavaScript文件：

所有在紅線邊框里面的腳本文件都是由RequireJS自動(dòng)加載的。

我們將用RequireJS Optimizer（RequireJS優(yōu)化器）來優(yōu)化這個(gè)項(xiàng)目。根據(jù)已下載的說明文件，找到r.js并將其復(fù)制到<root>目錄。 jrburke的r.js是一個(gè)能運(yùn)行基于AMD的項(xiàng)目的命令行工具，但更重要的是，它包含RequireJS Optimizer允許我們對(duì)腳本文件(scripts)合并與壓縮。

RequireJS Optimizer有很多用處。它不僅能夠優(yōu)化單個(gè)JavaScript或單個(gè)CSS文件，它還可以優(yōu)化整個(gè)項(xiàng)目或只是其中的一部分，甚至多頁應(yīng)用程序 (multi-page application)。它還可以使用不同的縮小引擎(minification engines)或者干脆什么都不用(no minification at all)，等等。本文無意于涵蓋RequireJS Optimizer的所有可能性，在此僅演示它的一種用法。

正如我之前所提到的，我們將用到Node.js來運(yùn)行優(yōu)化器(optimizer)。用如下的命令運(yùn)行它(optimizer)：

運(yùn)行RequireJS Optimizer

$ node r.js -o <arguments>

有兩種方式可以將參數(shù)傳遞給optimizer。一種是在命令行上指定參數(shù)：

在命令行上指定參數(shù)

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

另一種方式是構(gòu)建一個(gè)配置文件(相對(duì)于執(zhí)行文件夾)并包含指定的參數(shù) ：

$ node r.js -o build.js

build.js的內(nèi)容：配置文件中的參數(shù)

({      baseUrl: ".",      name: "main",      out: "main-built.js" })

我認(rèn)為構(gòu)建一個(gè)配置文件比在命令行中使用參數(shù)的可讀性更高，因此我將采用這種方式。接下來我們就為項(xiàng)目創(chuàng)建一個(gè)<root>/build.js文件，并且包括以下的參數(shù)： <root>/build.js

({      appDir: './',      baseUrl: './js',      dir: './dist',      modules: [          {              name: 'main'         }      ],      fileExclusionRegExp: /^(r|build)\.js$/,      optimizeCss: 'standard',      removeCombined: true,      paths: {          jquery: 'lib/jquery',          underscore: 'lib/underscore',          backbone: 'lib/backbone/backbone',          backboneLocalstorage: 'lib/backbone/backbone.localStorage',          text: 'lib/require/text'     },      shim: {          underscore: {              exports: '_'         },          backbone: {              deps: [                  'underscore',                  'jquery'             ],              exports: 'Backbone'         },          backboneLocalstorage: {              deps: ['backbone'],              exports: 'Store'         }      }  })

弄明白R(shí)equireJS Optimizer的所有配置項(xiàng)并不是本文的目的所在，但我想解釋（描述）一下本文中我所采用的參數(shù)：

了解RequireJS Optimizer的更多介紹以及更多高級(jí)應(yīng)用，除了其網(wǎng)頁早先提供的資料，你可以點(diǎn)擊此處查閱所有可用配置選項(xiàng)的詳細(xì)的信息。

既然現(xiàn)在已經(jīng)有了構(gòu)建文件（build file），那么就可以運(yùn)行優(yōu)化器（optimizer）了。進(jìn)入<root> 目錄并執(zhí)行如下命令：

運(yùn)行優(yōu)化器（optimizer）

$ node r.js -o build.js

一個(gè)新的文件夾會(huì)被生成：<root>/dist。重要的是要注意到，現(xiàn)在<root>/dist/js/main.js 包含了所有已合并與壓縮的具有依賴關(guān)系的文件。 此外，<root>/dist/css/base.css也被優(yōu)化了。

運(yùn)行優(yōu)化后的項(xiàng)目，它看起來與未優(yōu)化之前的項(xiàng)目完全一樣。再檢查一下該頁面的網(wǎng)絡(luò)傳輸（network traffic）信息，會(huì)發(fā)現(xiàn)僅有兩個(gè)JavaScript文件被加載。

RequireJs Optimizer將服務(wù)器上的腳本文件從13個(gè)減少到2個(gè)并且將文件的總大小從164KB減少到58.6KB（require.js與main.js）。

開銷

顯然，在優(yōu)化之后，我們?cè)僖矝]有必要引用require.js文件了。因?yàn)橐呀?jīng)沒有被分離的腳本文件了并且所有具有依賴關(guān)系的文件也已被加載。

盡管如此，優(yōu)化過程將我們所有的腳本合并生成了一個(gè)優(yōu)化后的腳本文件，其中包含了很多次define() 和require()調(diào)用。 因此，為了保證應(yīng)用程序能夠正常運(yùn)行，define()和require()必須指定并實(shí)施到應(yīng)用程序的某處（即包含這些文件）。

這會(huì)導(dǎo)致一個(gè)眾所周知的開銷：我們總是會(huì)有一些代碼實(shí)現(xiàn)define()和require()。這些代碼并不是應(yīng)用程序的一部分，它們的存在僅僅是為我們的基礎(chǔ)建設(shè)考慮（infrastructure considerations）。 當(dāng)我們開發(fā)一個(gè)JavaScript庫(kù)（JavaScript library）時(shí)，這個(gè)問題變得尤為巨大。相比RequireJS，這些庫(kù)通常都很小，因此在庫(kù)中包含它會(huì)造成一筆巨大的開銷。

在我寫這篇文章的時(shí)候，對(duì)于這方面的開銷還沒有一個(gè)完整的解決方案，但是我們可以使用almond來緩解這個(gè)問題。Almond是一個(gè)極簡(jiǎn)單的AMD加載器，它實(shí)現(xiàn)了RequireJS接口（API）。因此，可以用來在已優(yōu)化過的代碼中替代RequireJS實(shí)現(xiàn)，我們可以在項(xiàng)目中包含almond。

如令，我正致力于開發(fā)一個(gè)優(yōu)化器（optimizer），它將能夠優(yōu)化RequireJS應(yīng)用程序，而無需開銷，但它仍然是一個(gè)新的項(xiàng)目（處于開發(fā)的初期階段）因此這里沒有任何關(guān)于它的展示。

下載與總結(jié)

• 下載 未經(jīng)優(yōu)化的TodoMVC Backbone.js + RequireJS 項(xiàng)目或者查看它。

• 下載 優(yōu)化后的TodoMVC Backbone.js + RequireJS 項(xiàng)目（位于dist文件夾下）或查看它。

到此，相信大家對(duì)“如何優(yōu)化RequireJS項(xiàng)目”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！