Require.js在多個頁面上加載相同的腳本

Question

我剛剛學習Require.js。可以說我有以下頁面：

• 將pageA.html
• pageB.html

在網頁A，我需要加載以下腳本：

• taco.js
• hamburger.js

網頁B的，我需要加載以下腳本：

• taco.js
• salad.js
• superman.js

爲了做到這一點使用基本require.js加載，我想我會做到這一點：

<!-- pageA.html contains: 
<script data-main="/scripts/pageAScripts" src="/scripts/require.js"></script> 

是：

// pageAScripts.js 
require(["/scripts/taco", "/scripts/hamburger"]); 

也

<!-- pageB.html contains: 
<script data-main="/scripts/pageBScripts" src="/scripts/require.js"></script> 

是：

// pageBScripts.js 
require(["/scripts/taco", "/scripts/salad", "/scripts/superman"]); 

所以現在我會爲每個頁面的主入口點。但我擔心的是在多個地方使用taco.js。因爲當我在構建腳本中使用require.js的優化解決方案時，它創建了pageAScripts.js（包含taco.js,hamburger.js）和pageBScripts.js（包含taco.js,salad.js和superman.js）。

因此，現在taco.js的代碼通過「優化」過程加載兩次。就我而言，taco.js是一個相當大的文件，並且讓用戶最終下載數據兩次是不可取的。

我在這裏錯過了什麼工作流程？我對require.js仍然很新，所以我確定有一些東西。

Answer 1

您可以將taco.js作爲單獨的文件加載，並在構建文件中告訴requirejs不要將taco.js作爲構建文件的一部分。 在您需要配置指定路徑taco.js -

requirejs.config({ 
    paths: { 
    'taco': 'path/to/taco' 
    } 
}); 

而且需要在你的pageAScript.jstaco.js和pageBScript.js如下 -

require(['taco'], function (taco) { 
}); 

而在你的build文件告訴requirejs不包括玉米麪豆卷作爲的一部分使用建立文件empty:

({ 
    baseUrl: ".", 
    name: "page(A/B)Script", 
    out: "page(A/B)Script.js", 
    paths: { 
    taco: "empty:" 
    } 
}) 

你可以鰭d更多關於此here。

現在您可以使用腳本標記在pageA.html和pageB.html上加載taco.js。

<script type="text/javascript" src="path/to/taco/js"></script> 

這裏taaco.js將被載入第一頁和第二頁會從瀏覽器緩存加載。

Answer 2

您可以使用multipage project的示例。適應RequireJS那裏建立配置到你：

{ 
    baseUrl: '.', 
    dir: '../build', // This is where the output will go. 
    modules: [ 
     { 
      name: 'scripts/taco' 
     }, 
     { 
      name: 'scripts/pageAscripts', 
      exclude: ['scripts/taco'] 
     }, 
     { 
      name: 'scripts/pageBscripts', 
      exclude: ['scripts/taco'] 
     } 
    ] 
} 

這是一個什麼樣的項目多頁例如提供了一個最小的適應。在構建結束時，您將擁有3個包：build/scripts/pageAscripts，其中包含僅用於頁面A的代碼build/scripts/pageBscripts，其中包含僅用於頁面B的代碼; build/scripts/taco僅包含taco模塊及其所有依賴項。