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模块及其所有依赖项。