成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端優(yōu)化：RequireJS Optimizer 的使用和配置方法

Alan / 1519人閱讀

摘要：是自帶的前端優(yōu)化工具，可以對(duì)項(xiàng)目中的和代碼使用或者進(jìn)行壓縮合并。這篇文章介紹的使用和配置方法，幫助大家解決使用中碰到的問(wèn)題。對(duì)腳本的優(yōu)化支持目前流行的和兩種壓縮方式，需要環(huán)境支持，而則需要環(huán)境。定義要被優(yōu)化的模塊數(shù)組。

RequireJS Optimizer 是 RequireJS 自帶的前端優(yōu)化工具，可以對(duì) RequireJS 項(xiàng)目中的JavaScript和CSS 代碼使用?UglifyJS 或者?Closure Compiler 進(jìn)行壓縮合并。這篇文章介紹RequireJS Optimizer 的使用和配置方法，幫助大家解決使用中碰到的問(wèn)題。

RequireJS Optimizer 對(duì)腳本的優(yōu)化支持目前流行的?UglifyJS 和 Closure Compiler 兩種壓縮方式，UglifyJS 需要 NodeJS 環(huán)境支持，而?Closure Compiler 則需要 Java 環(huán)境。這篇文章是以運(yùn)行于 NodeJS 的 UglifyJS 來(lái)優(yōu)化的，這也是?RequireJS Optimizer 默認(rèn)的壓縮方法。

首先需要安裝?Node 0.4.0，然后下載 r.js，下載好以后就可以在命令行里對(duì)前端代碼進(jìn)行優(yōu)化了。r.js的參數(shù)傳遞使用方式，一是直接加在命令行后面，如下：

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

二是新建一個(gè)配置文件，例如 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"
            ]
        }
    ]
}
基本參數(shù)介紹

appDir

應(yīng)用程序的最頂層目錄?？蛇x的，如果設(shè)置了的話(huà)，r.js會(huì)認(rèn)為腳本在這個(gè)路徑的子目錄中，應(yīng)用程序的文件都會(huì)被拷貝到輸出目錄（dir 定義的路徑）。如果不設(shè)置，則使用下面的 baseUrl 路徑。

baseUrl

　　默認(rèn)情況下，所有的模塊都是相對(duì)于這個(gè)路徑的。如果沒(méi)有設(shè)置，則模塊的加載是相對(duì)于 build 文件所在的目錄。另外，如果設(shè)置了appDir，那么 baseUrl 應(yīng)該定義為相對(duì)于 appDir 的路徑。

dir

輸出目錄的路徑。如果不設(shè)置，則默認(rèn)為和 build 文件同級(jí)的 build 目錄。

optimize

JavaScript 代碼優(yōu)化方式。可設(shè)置的值：

-   "uglify：使用?UglifyJS 壓縮代碼，默認(rèn)值；
-   "uglify2"：使用?2.1.2+ 版本進(jìn)行壓縮；
-   "closure"： 使用?Google"s Closure Compiler 進(jìn)行壓縮合并，需要 Java 環(huán)境；
-   "closure.keepLines"：使用?Closure Compiler 進(jìn)行壓縮合并并保留換行；
-   "none"：不做壓縮合并；

optimizeCss

CSS 代碼優(yōu)化方式，可選的值有：

-   "standard"：標(biāo)準(zhǔn)的壓縮方式；
-   "standard.keepLines"：保留換行；
-   "standard.keepComments"：保留注釋?zhuān)?-   "standard.keepComments.keepLines"：保留換行；
-   "none"：不壓縮；

mainConfigFile

如果不想重復(fù)定義的話(huà)，可以使用這個(gè)參數(shù)配置 RequireJS 的配置文件路徑。

removeCombined

刪除之前壓縮合并的文件，默認(rèn)值 false。

fileExclusionRegExp

要排除的文件的正則匹配的表達(dá)式。

modules

定義要被優(yōu)化的模塊數(shù)組。每一項(xiàng)是模塊優(yōu)化的配置，常用的幾個(gè)參數(shù)如下：

- `name：`模塊名；

- `include：`額外引入的模塊，`create：`如果不存在，是否創(chuàng)建。默認(rèn)`false`；

- `exclude：`要排除的模塊。有些模塊有公共的依賴(lài)模塊，在合并的時(shí)候每個(gè)都會(huì)壓縮進(jìn)去，例如一些基礎(chǔ)庫(kù)。使用 exclude 就可以把這些模塊在壓縮在一個(gè)更早之前加載的模塊中，其它模塊不用重復(fù)引入。

其它事項(xiàng)

RequireJS 配置也可以放到 RequireJS Optimizer?配置文件里面，例如：

{
    baseUrl: "../js",
    dir: "../dist",
    optimize: "uglify",
    optimizeCss: "standard.keepLines",
    removeCombined: true,
    fileExclusionRegExp: /^./,
    modules: [
        {
            name: "app/dispatcher",
        },
        {
            name: "app/in-storage",
            exclude: [
                "jquery",
                "app/common",
                "pkg/DatePicker/app"
            ]
        }
    ],
    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"
        }
    }
}

RequireJS Optimizer 的配置參數(shù)還有很多，完整的參數(shù)介紹可以看這里：

example.build.js

為方便運(yùn)行，可以新建一個(gè)批處理文件：

@echo off 

echo build...
e:
cd E:SCMSRCscm-html
ew-scm-html	ools

node r.js -o build.js

echo Press any key to exit! 
echo. & pause

注意事項(xiàng)：RequireJS Optimizer 只支持使用 require 和 define 語(yǔ)法定義的模塊，因此下面這種通過(guò)變量定義的方式是不支持的：

var mods = someCondition ? ["a", "b"] : ["c", "d"];
require(mods);

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

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

或者：

define(["a", "b"], function (a, b) {});
進(jìn)一步優(yōu)化

使用 r.js 優(yōu)化后的代碼可以使用 almond?來(lái)加載。almond 是一個(gè)輕量的 AMD 加載器，提供了最基礎(chǔ)的 AMD API 實(shí)現(xiàn)以及模塊加載功能。almond 只有不到 400 行代碼，要比 RequireJS 小很多。可以使用 r.js 把 almond 一起合并到業(yè)務(wù)代碼的前面，如下：

(function () {
    //almond will be here
    //main and its nested dependencies will be here
}());

almond 特別適合使用 AMD 的網(wǎng)站或應(yīng)用，但也有一些限制：

所有的模塊編譯為一個(gè)文件，沒(méi)有動(dòng)態(tài)的加載；

所有的模塊都需要在 define() 定義 ID 和依賴(lài)，這個(gè)?RequireJS Optimizer 會(huì)處理；

只能有一個(gè)?requirejs.config() 或者 require.config() 調(diào)用；

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

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

不能使用?packages/packagePaths 配置。

如果你的項(xiàng)目中沒(méi)有這些問(wèn)題的話(huà)，可以放心使用 almond 進(jìn)行加載。

?

via 夢(mèng)想天空

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110836.html

相關(guān)文章

  • requirejs的插件介紹與制作

    摘要：一句化即它是插件的插件，作者事后才發(fā)現(xiàn)有這么一個(gè)插件繞了不少?gòu)澛?。這里的主要是為了保存這段內(nèi)容用于打包使用。免費(fèi)領(lǐng)取驗(yàn)證碼內(nèi)容安全短信發(fā)送直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 前言我這里就不介紹requirejs了， 簡(jiǎn)而言之： requirejs是支持AMD規(guī)范的模塊加載器， 事實(shí)上它也是...

    shinezejian 評(píng)論0 收藏0

  • 使用require.js構(gòu)建優(yōu)化項(xiàng)目實(shí)踐

    摘要：嘗試用自己主頁(yè)的簡(jiǎn)單代碼構(gòu)建優(yōu)化下。存放和，放需要構(gòu)建的項(xiàng)目代碼，為構(gòu)建目標(biāo)文件夾。我另外一篇博文構(gòu)建優(yōu)化有簡(jiǎn)單說(shuō)了下，構(gòu)建的命令，其實(shí)上的官網(wǎng)，看有更詳細(xì)的內(nèi)容。 嘗試用自己主頁(yè)的簡(jiǎn)單代碼構(gòu)建優(yōu)化下。 在文件夾requirejs-optimizer下新建三個(gè)文件夾：tools，www和www-built。tools存放r.js和build.js，www放需要構(gòu)建的項(xiàng)目代碼，www-b...

    anRui 評(píng)論0 收藏0

  • 【前端構(gòu)建】RequireJS及其優(yōu)化工具

    摘要：介紹一款模塊加載工具的入門(mén)，并且重點(diǎn)介紹其優(yōu)化工具。發(fā)布目錄項(xiàng)目源代碼工具目錄，例如構(gòu)建工具等。另外，前端代碼發(fā)布前都會(huì)進(jìn)行壓縮，使文件足夠小。原來(lái)是因?yàn)槔锪耍詢(xún)?yōu)化工具把也合并進(jìn)來(lái)了。而優(yōu)化工具要用好，要多嘗試他們的配置選項(xiàng)。 前端變化太快，如今RequireJS已經(jīng)無(wú)法吸引眼球了。介紹一款模塊加載工具：RequireJS的入門(mén)，并且重點(diǎn)介紹其優(yōu)化工具。 一、RequireJS簡(jiǎn)介...

    Loong_T 評(píng)論0 收藏0

  • 前端性能優(yōu)化——加載頁(yè)面和靜態(tài)資源（入門(mén)級(jí)別）

    摘要：服務(wù)器可以在與每次客戶(hù)端傳送的字段進(jìn)行比較，如果相等，則表示未修改，響應(yīng)反之，則表示已修改，響應(yīng)狀態(tài)碼，返回新資源。 最近一直在準(zhǔn)備面試，接觸了一些性能優(yōu)化方面的知識(shí)，前端性能優(yōu)化主要從兩個(gè)方面進(jìn)行： 1.加載頁(yè)面和靜態(tài)資源；2.頁(yè)面渲染； 這篇文章主要講第一點(diǎn)： 加載頁(yè)面和靜態(tài)資源 加載頁(yè)面和靜態(tài)資源主要可以從三個(gè)角度進(jìn)行： 靜態(tài)資源的合并、壓縮(http2.0時(shí)代有變) 靜態(tài)資源...

    moven_j 評(píng)論0 收藏0

  • FIS

    摘要：執(zhí)行這個(gè)指令，對(duì)項(xiàng)目進(jìn)行發(fā)布。尋找文件，放在文件底下尋找文件，放在文件底下中語(yǔ)法拓展，我們可以將表示除拓展名以外的任何字符。告知，需要制作精靈圖。替換內(nèi)置打包工具中的路徑不會(huì)自動(dòng)修改。配置規(guī)范規(guī)范插件入口，引入文件方式不同。 Fis簡(jiǎn)介 一個(gè)工程化的工具，主要用來(lái)處理前端的項(xiàng)目。作用：代碼合并，代碼壓縮，資源定義，資源嵌套等等。 fis 是基于流的處理，fis有自己的一個(gè)流處理過(guò)程： ...

    mdluo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<