建站
咨詢
售后
建站咨詢
新聞中心
本文將演示如何合并與壓縮一個基于RequireJS的項目。本文中將用到苦干個工具，這其中就包括Node.js。 因此，如果你手頭上還沒有Node.js可以點擊此處下載一個。
西工ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
動機
關(guān)于RequireJS已經(jīng)有很多文章介紹過了。這個工具可以將你的JavaScript代碼輕易的分割成苦干個模塊(module)并且保持你的代碼模塊化與易維護性。這樣，你將獲得一些具有互相依賴關(guān)系的JavaScript文件。僅僅需要在你的HTML文檔中引用一個基于RequireJS的腳本文件，所有必須的文件都將會被自動引用到這個頁面上。
但是，在生產(chǎn)環(huán)境中將所有的JavaScript文件分離，這是一個不好的做法。這會導致很多次請求(requests)，即使這個些文件都很小，也會浪費很多時間。 可以通過合并這些腳本文件，以減少請求的次數(shù)達到節(jié)省加載時間的目的。
另一種節(jié)省加載時間的技巧是縮小這些被加載文件的大小，相對小一些的文件會傳輸?shù)母煲恍?。這個過程叫作最小化 (minification) ，它是通過小心的改變腳本文件的代碼結(jié)構(gòu)并且不改變代碼的形為(behavior)和功能(functionality)來實現(xiàn)的。例如這些：去除不必要的空格，縮短(mangling，或都壓縮)變量(variables)名與函數(shù)(methods，或者叫方法)名，等等。這種合并并壓縮文件的過程叫做代碼優(yōu)化( optimization)。這種方法除了用于優(yōu)化(optimization)JavaScript文件，同樣適用于CSS文件的優(yōu)化。
RequireJS有兩個主要方法(method): define()和require()。這兩個方法基本上擁有相同的定義(declaration) 并且它們都知道如何加載的依賴關(guān)系，然后執(zhí)行一個回調(diào)函數(shù)(callback function)。與require()不同的是， define()用來存儲代碼作為一個已命名的模塊。 因此define()的回調(diào)函數(shù)需要有一個返回值作為這個模塊定義。這些類似被定義的模塊叫作AMD (Asynchronous Module Definition，異步模塊定義)。
如果你不大熟悉RequireJS或者不太明白我寫的東西 – 不要擔心。下面有一個關(guān)于這些的例子。
JavaScript應(yīng)用程序的優(yōu)化
在本小節(jié)中我將向大家展示如何優(yōu)化Addy Osmani的TodoMVC Backbone.js + RequireJS 項目。 由于TodoMVC項目在不同的框架下包含許多TodoMVC實現(xiàn)，我下載了1.1.0版并提取出Backbone.js + RequireJS應(yīng)用程序。點擊這里下載該應(yīng)用程序并解壓下載到的zip文件。todo-mvc的解壓目錄將是我們這個例子的根目錄(root path)，從現(xiàn)在起我將把這個目錄引用為
查看
index.html引用腳本文件的代碼
其實，整個項目只需要引用require.js這個腳本文件。如果你在瀏覽器中運行這個項目，并且在你喜歡的（擅長的）調(diào)試工具的network標簽中， 你就會發(fā)現(xiàn)瀏覽器同時也加載了其它的JavaScript文件：
所有在紅線邊框里面的腳本文件都是由RequireJS自動加載的。
我們將用RequireJS Optimizer（RequireJS優(yōu)化器）來優(yōu)化這個項目。根據(jù)已下載的說明文件，找到r.js并將其復制到
RequireJS Optimizer有很多用處。它不僅能夠優(yōu)化單個JavaScript或單個CSS文件，它還可以優(yōu)化整個項目或只是其中的一部分，甚至多頁應(yīng)用程序 (multi-page application)。它還可以使用不同的縮小引擎(minification engines)或者干脆什么都不用(no minification at all)，等等。本文無意于涵蓋RequireJS Optimizer的所有可能性，在此僅演示它的一種用法。
正如我之前所提到的，我們將用到Node.js來運行優(yōu)化器(optimizer)。用如下的命令運行它(optimizer)：
運行RequireJS Optimizer
- $ node r.js -o
有兩種方式可以將參數(shù)傳遞給optimizer。一種是在命令行上指定參數(shù)：
在命令行上指定參數(shù)
- $ node r.js -o baseUrl=. name=main out=main-built.js
另一種方式是構(gòu)建一個配置文件(相對于執(zhí)行文件夾)并包含指定的參數(shù) ：
- $ node r.js -o build.js
build.js的內(nèi)容：配置文件中的參數(shù)
- ({
- baseUrl: ".",
- name: "main",
- out: "main-built.js"
- })
我認為構(gòu)建一個配置文件比在命令行中使用參數(shù)的可讀性更高，因此我將采用這種方式。接下來我們就為項目創(chuàng)建一個
- ({
- 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'
- }
- }
- })
#p#
弄明白RequireJS Optimizer的所有配置項并不是本文的目的所在，但我想解釋（描述）一下本文中我所采用的參數(shù)：
| 參數(shù) | 描述 |
|---|---|
| appDir | 應(yīng)用程序的目錄（即 |
| baseUrl | 相對于appDir，代表查找文件的錨點（that represents the anchor path for finding files）。 |
| dir | 這是一個輸出目錄，所有的應(yīng)用程序文件將會被復制到該文件夾下。 |
| modules | 一個包含多個對象的數(shù)組。每個對象代表一個將被優(yōu)化的模塊（module）。 |
| fileExclusionRegExp | 任何與此規(guī)則匹配的文件或文件夾都將不會被復制到輸出目錄。由于我們把r.js和build.js放置在應(yīng)用程序目錄下，我們希望優(yōu)化器（optimizer）排除這兩個文件。 因此我們可以這樣設(shè)置/^(r|build)\.js$/。 |
| optimizeCss | RequireJS Optimizer會自動優(yōu)化應(yīng)用程序下的CSS文件。這個參數(shù)控制CSS***化設(shè)置。允許的值： “none”, “standard”, “standard.keepLines”, “standard.keepComments”, “standard.keepComments.keepLines”。 |
| removeCombined | 如果為true，優(yōu)化器（optimizer）將從輸出目錄中刪除已合并的文件。 |
| paths | 模塊（modules）的相對目錄。 |
| shim | 為那些沒有使用define()聲名依賴關(guān)系及設(shè)置模塊值的模塊，配置依賴關(guān)系與“瀏覽器全局”出口的腳本。 |
了解RequireJS Optimizer的更多介紹以及更多高級應(yīng)用，除了其網(wǎng)頁早先提供的資料，你可以點擊此處查閱所有可用配置選項的詳細的信息。
既然現(xiàn)在已經(jīng)有了構(gòu)建文件（build file），那么就可以運行優(yōu)化器（optimizer）了。進入
運行優(yōu)化器（optimizer）
- $ node r.js -o build.js
一個新的文件夾會被生成：
運行優(yōu)化后的項目，它看起來與未優(yōu)化之前的項目完全一樣。再檢查一下該頁面的網(wǎng)絡(luò)傳輸（network traffic）信息，會發(fā)現(xiàn)僅有兩個JavaScript文件被加載。
RequireJs Optimizer將服務(wù)器上的腳本文件從13個減少到2個并且將文件的總大小從164KB減少到58.6KB（require.js與main.js）。
開銷
顯然，在優(yōu)化之后，我們再也沒有必要引用require.js文件了。因為已經(jīng)沒有被分離的腳本文件了并且所有具有依賴關(guān)系的文件也已被加載。
盡管如此，優(yōu)化過程將我們所有的腳本合并生成了一個優(yōu)化后的腳本文件，其中包含了很多次define() 和require()調(diào)用。 因此，為了保證應(yīng)用程序能夠正常運行，define()和require()必須指定并實施到應(yīng)用程序的某處（即包含這些文件）。
這會導致一個眾所周知的開銷：我們總是會有一些代碼實現(xiàn)define()和require()。這些代碼并不是應(yīng)用程序的一部分，它們的存在僅僅是為我們的基礎(chǔ)建設(shè)考慮（infrastructure considerations）。 當我們開發(fā)一個JavaScript庫（JavaScript library）時，這個問題變得尤為巨大。相比RequireJS，這些庫通常都很小，因此在庫中包含它會造成一筆巨大的開銷。
在我寫這篇文章的時候，對于這方面的開銷還沒有一個完整的解決方案，但是我們可以使用almond來緩解這個問題。Almond是一個極簡單的AMD加載器，它實現(xiàn)了RequireJS接口（API）。因此，可以用來在已優(yōu)化過的代碼中替代RequireJS實現(xiàn)，我們可以在項目中包含almond。
如令，我正致力于開發(fā)一個優(yōu)化器（optimizer），它將能夠優(yōu)化RequireJS應(yīng)用程序，而無需開銷，但它仍然是一個新的項目（處于開發(fā)的初期階段）因此這里沒有任何關(guān)于它的展示。
下載與總結(jié)
- 下載 未經(jīng)優(yōu)化的TodoMVC Backbone.js + RequireJS 項目或者查看它。
- 下載 優(yōu)化后的TodoMVC Backbone.js + RequireJS 項目（位于dist文件夾下）或查看它。
在閱讀完這篇文章后，我相信你已經(jīng)明確的知道如何去優(yōu)化你的RequireJS應(yīng)用程序。我會很高興的解答您的任何問題。
英文原文：Optimize (Concatenate and Minify) RequireJS Projects
譯文連接：http://www.oschina.net/translate/optimize-requirejs-projects
本文標題：優(yōu)化RequireJS項目（合并與壓縮）
文章URL：http://m.5511xx.com/article/djoipee.html
