[TOC] # 優化器`r.js` RequireJS提供一個基于 node.js 的命令行工具`r.js`的打包工具，用來壓縮多個js文件。 它的工作其實就是：解讀出根據你的配置環境的目錄結構下的代碼存放目錄結構，然后把標準的代碼結構轉換成具名模塊的代碼結構，如果你執行了合并，則把依賴的模塊的代碼合并到制定的一個文件中，以減少網頁的HTTP請求數 第一步是安裝`r.js`（假設已經安裝了`node.js`）。 ~~~ npm install -g requirejs //r.js 已經是其一部分 ~~~ 然后，使用的時候，直接在命令行鍵入以下格式的命令。 ~~~ node r.js -o <arguments> ~~~ `<argument>`表示命令運行時，所需要的一系列參數，比如像下面這樣： ~~~ node r.js -o baseUrl=. name=main out=main-built.js ~~~ 除了直接在命令行提供參數設置，也可以將參數寫入一個文件，假定文件名為build.js。 ```js ({ baseUrl: ".", name: "main", out: "main-built.js" }) ``` 然后，在命令行下用r.js運行這個參數文件，就OK了，不需要其他步驟了。 ~~~ node r.js -o build.js ~~~ 下面是一個參數文件的范例，假定位置就在根目錄下，文件名為build.js。 ```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' } } }) ``` 上面代碼將多個模塊壓縮合并成一個main.js。 參數文件的主要成員解釋如下： * appDir：項目目錄，相對于參數文件的位置。 * baseUrl：js文件的位置。 * dir：輸出目錄。 * modules：一個包含對象的數組，每個對象就是一個要被優化的模塊。 * fileExclusionRegExp：凡是匹配這個正則表達式的文件名，都不會被拷貝到輸出目錄。 * optimizeCss: 自動壓縮CSS文件，可取的值包括“none”, “standard”,“standard.keepLines”,“standard.keepComments”, “standard.keepComments.keepLines”。 * removeCombined：如果為true，合并后的原文件將不保留在輸出目錄中。 * paths：各個模塊的相對路徑，可以省略js后綴名。 * shim：配置依賴性關系。如果某一個模塊不是AMD模式定義的，就可以用shim屬性指定模塊的依賴性關系和輸出值。 * generateSourceMaps：是否要生成source map文件。 更詳細的解釋可以[參考官方文檔](https://github.com/requirejs/r.js/blob/master/build/example.build.js)。 運行優化命令后，可以前往 dist 目錄查看優化后的文件。 下面是另一個 build.js 的例子。 ```js ({ mainConfigFile : "js/main.js", baseUrl: "js", removeCombined: true, findNestedDependencies: true, dir: "dist", modules: [ { name: "main", exclude: [ "infrastructure" ] }, { name: "infrastructure" } ] }) ``` 上面代碼將模塊文件壓縮合并成兩個文件，第一個是 main.js（指定排除 infrastructure.js），第二個則是 infrastructure.js。 # 多對多打包 個人覺得，每個頁面要只有自己相關的模塊，不能第二個頁面還加載第一個頁面中用不著的無關緊要的 js 文件。 所以理想打包情況是：使用`r.js`來合并壓縮，使每個頁面除下載`require.js`外只下載各自合并的大文件 page1.js 和 page2.js。 [example-multipage-shim](https://github.com/requirejs/example-multipage-shim) 基于 RequireJS 的多頁面項目，這些頁面共享一組帶有shim配置的通用模塊。 # 參考 [RequireJS - 使用 r.js 實現模塊、項目的壓縮合并（壓縮js、css文件）](http://www.hangge.com/blog/cache/detail_1704.html) [優化器r.js](http://javascript.ruanyifeng.com/tool/requirejs.html#toc6) [requirejs-optimization](http://requirejs.org/docs/optimization.html) [RequireJS進階-模塊的優化及配置的詳解](http://blog.csdn.net/ye_mingjia/article/details/42374975)