好事成双的寓意

RequireJS Optimizer 的使用和配置方法

2019-08-16        69

RequireJS Optimizer 是 RequireJS 自帶的前端優化工具,可以對 RequireJS 項目中的 JavaScript & CSS 代碼使用 UglifyJS 或者 Closure Compiler 進行壓縮合并。這篇文章介紹RequireJS Optimizer 的使用和配置方法,幫助大家解決使用中碰到的問題。

R equireJS Optimizer 對腳本的優化支持目前流行的 UglifyJS 和 Closure Compiler 兩種壓縮方式,UglifyJS 需要 NodeJS 環境支持,而 Closure Compiler 則需要 Java 環境。這篇文章是以運行于 NodeJS 的 UglifyJS 來優化的,這也是 RequireJS Optimizer 默認的壓縮方法。

首頁需要安裝 Node 0.4.0 或更高版本,然后下載 r.js,下載好以后就可以在命令行里對前端代碼進行優化了。r.js 的參數傳遞使用方式,一是直接加在命令行后面,如下:

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

二是新建一個配置文件,例如 build.js(推薦使用這種方式),這樣配置更方便,如下:

node r.js -o build.js

build.js 的配置代碼如下:

{

baseUrl: "../js",

dir: "../dist",

optimize: "uglify",

optimizeCss: "standard.keepLines",

mainConfigFile: "../js/main.js",

removeCombined: true,

fileExclusionRegExp: /^\./,

modules: [

{

name: "app/dispatcher",

},

{

name: "app/in-storage",

exclude: [

"jquery",

"app/common",

"pkg/DatePicker/app"

]

}

]

}

基本參數介紹

appDir

應用程序的最頂層目錄。可選的,如果設置了的話,r.js 會認為腳本在這個路徑的子目錄中,應用程序的文件都會被拷貝到輸出目錄(dir 定義的路徑)。如果不設置,則使用下面的 baseUrl 路徑。

baseUrl

默認情況下,所有的模塊都是相對于這個路徑的。如果沒有設置,則模塊的加載是相對于 build 文件所在的目錄。另外,如果設置了appDir,那么 baseUrl 應該定義為相對于 appDir 的路徑。

dir

輸出目錄的路徑。如果不設置,則默認為和 build 文件同級的 build 目錄。

optimize

JavaScript 代碼優化方式。可設置的值:

"uglify:使用 UglifyJS 壓縮代碼,默認值;

"uglify2":使用 2.1.2+ 版本進行壓縮;

"closure": 使用 Google's Closure Compiler 進行壓縮合并,需要 Java 環境;

"closure.keepLines":使用 Closure Compiler 進行壓縮合并并保留換行;

"none":不做壓縮合并;

optimizeCss

CSS 代碼優化方式,可選的值有:

"standard":標準的壓縮方式;

"standard.keepLines":保留換行;

"standard.keepComments":保留注釋;

"standard.keepComments.keepLines":保留換行;

"none":不壓縮;

mainConfigFile

如果不想重復定義的話,可以使用這個參數配置 RequireJS 的配置文件路徑。

removeCombined

刪除之前壓縮合并的文件,默認值 false。

fileExclusionRegExp

要排除的文件的正則匹配的表達式。

modules

定義要被優化的模塊數組。每一項是模塊優化的配置,常用的幾個參數如下:

name:模塊名;

create:如果不存在,是否創建。默認 false;

include:額外引入的模塊,和 name 定義的模塊一起壓縮合并;

exclude:要排除的模塊。有些模塊有公共的依賴模塊,在合并的時候每個都會壓縮進去,例如一些基礎庫。使用 exclude 就可以把這些模塊在壓縮在一個更早之前加載的模塊中,其它模塊不用重復引入。

其它事項

RequireJS 配置也可以放到 RequireJS Optimizer 配置文件里面,例如:

+ View Code

RequireJS Optimizer 的配置參數還有很多,完整的參數介紹可以看這里:

https://github.com/jrburke/r.js/blob/master/build/example.build.js

為方便運行,可以新建一個批處理文件:

@echo off

echo build...

e:

cd E:\SCM\SRC\scm-html\new-scm-html\tools

node r.js -o build.js

echo Press any key to exit!

echo. & pause

注意事項:RequireJS Optimizer 只支持使用 require 和 define 語法定義的模塊,因此下面這種通過變量定義的方式是不支持的:

var mods = someCondition ? ['a', 'b'] : ['c', 'd'];

require(mods);

而如果是這樣定義則可以:

require(['a', 'b']);

或者:

define(['a', 'b'], function (a, b) {});

進一步優化

使用 r.js 優化后的代碼可以使用 almond 來加載。almond 是一個輕量的 AMD 加載器,提供了最基礎的 AMD API 實現以及模塊加載功能。almond 只有不到 400 行代碼,要比 RequireJS 小很多。可以使用 r.js 把 almond 一起合并到業務代碼的前面,如下:

(function () {

//almond will be here

//main and its nested dependencies will be here

}());

almond 特別適合使用 AMD 的網站或應用,但也有一些限制:

所有的模塊編譯為一個文件,沒有動態的加載;

所有的模塊都需要在 define() 定義 ID 和依賴,這個 RequireJS Optimizer 會處理;

只能有一個 requirejs.config() 或者 require.config() 調用;

不能使用 Require JS 多版本功能;

不能使用 require.toUrl() 或者 require.nameToUrl();

不能使用 packages/packagePaths 配置。

如果你的項目中沒有這些問題的話,可以放心使用 almond 進行加載。


AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

Tel 010-50933590

Hp 18910140161

設計優勢

獨立的設計團隊 帶給您全新的視覺體驗

功能開發

強大的技術實力,完成您想要的任何功能

售后服務

完善的售后服務,解決您在使用過程中遇到的問題

好事成双的寓意 389544965349180340789397542875915744911012685221138528316814584590130067974037622149151702278670 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();