RequireJS - 最佳化器

在本章中，我們將討論 RequireJS 中的最佳化。RequireJS 中的最佳化器具有以下特徵：

結合指令碼檔案，預設情況下使用 UglifyJS，Java 使用 Closure Compiler
將 CSS 檔案合併在一起。

最佳化器是 Node 和 Nashorn 的 r.js 介面卡的一個元件。它被開發為構建過程的一部分，而不是開發過程的一部分。

示例

在將 r.js 下載到您的專案資料夾後，資料夾的結構應如下所示：

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

您的 HTML 檔案將如下所示：

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

您的 main.js 檔案將如下所示：

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

您的 main.css 檔案將如下所示：

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

最佳化器的基本設定

您可以使用命令列引數或配置檔案構建屬性來設定專案，兩者可以互換。

以下是命令列的語法：

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

以下是構建配置檔案的語法：

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

之後，您可以將構建配置檔名稱傳遞到命令列中的最佳化器，如下所示：

node r.js -o build.js

命令列引數語法存在一些缺點。結合使用命令列引數或配置檔案構建屬性可以克服這些缺點。

最佳化單個 JS 檔案

要最佳化單個 JS 檔案，您需要建立一個 JS 檔案，其中包含其所有依賴項的內容。您的檔案應如下所示：

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

現在，您可以建立包含 app 所有依賴項的 main.js 檔案。此檔案用於在 HTML 檔案中使用一個請求載入所有 JS 檔案。請注意，建立的檔案不應存在於原始碼目錄中；這些檔案應位於專案的副本中。

CDN 資源的使用

最佳化器不使用網路資源/CDN（內容分發網路）載入指令碼。如果需要使用 CDN 載入指令碼，則需要將這些檔案對映到模組名稱並將檔案下載到本地檔案路徑。您可以在構建配置檔案的路徑配置中使用特殊單詞“empty”，如下面的語法所示：

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

主檔案將如下所示：

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

最佳化單個 CSS 檔案

CSS 檔案使用以下引數直接在命令列中進行最佳化，如下所示：

node ../../r.js -o cssIn = main.css out = main-built.css

CSS 檔案也可以在構建檔案中使用相同的屬性進行最佳化，如下所示：

...
cssIn:"main.css",
out:"main-built.css"
...

以上兩種方法都是允許的，並將建立一個名為 projectfolder/css/mainbuild.css 的檔案。此檔案將包含 main.css 的內容，url() 路徑已正確調整，並且已刪除註釋。

最佳化整個專案

最佳化器使用構建配置檔案來最佳化所有 css 和 js 檔案。在以下示例中，建立了 build.js 檔案。

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

build.js 檔案指示 RequireJS 將所有 app 資料夾（appDir 引數）複製到輸出資料夾 built（dir 引數），並將所有最佳化應用於輸出資料夾中的檔案。執行以下命令以在 app 資料夾中構建配置檔案：

node r.js -o build.js

列印頁面