我在一个网站上有多个页面使用RequireJS,大部分页面都有独特的功能。它们所有的共同模块(jQuery、Backbone等)都是相同的;它们也都有各自独特的模块。我想知道使用r.js来优化这段代码的最佳方法是什么。我看到RequireJS和Almond的不同部分文档和示例提出了许多替代方案——因此我列出了以下可能性列表,并询问哪种方法最受推荐(或是否有其他更好的方法):
1. 使用Almond优化整个网站的单个JS文件,它只需加载一次,然后保持缓存。这种最简单的方法的缺点是我会在每个页面上加载用户不需要的代码(即其他页面特定模块)。对于每个页面,加载的JS文件将比其所需的要大。 2. 为每个页面优化单个JS文件,其中包括通用和页面特定模块。这样,我可以在每个页面的文件中包含Almond,并且每个页面只会加载一个JS文件--相对于整个网站的单个JS文件来说,这个文件会小得多。但我看到的缺点是,通用模块不会在浏览器中缓存,对吧?因为对于用户访问的每个页面,她都必须重新下载jQuery、Backbone等大部分共同模块(因为这些库将构成每个独特单页JS文件的大部分)。 (这似乎是RequireJS多页面示例的方法,除了该示例没有使用Almond。) 3. 为共同模块和每个特定页面优化一个JS文件。这样,用户将缓存共同模块的文件,并在页面之间浏览时只需加载较小的特定页面JS文件。在此选项中,我看到两种完成它的方式,以包括RequireJS功能: a. 在所有页面上在共同模块之前加载文件require.js,使用data-main
语法或普通<script>
标记--根本不使用Almond。这意味着每个页面都有三个JS文件:require.js、共同模块和页面特定模块。
b. 这个代码片段似乎提出了一种将Almond插入每个优化文件的方法——因此我不必加载require.js,而是在我的共同模块和页面特定模块中都包含Almond。对吗?比预先加载require.js更有效吗?感谢您提供的任何建议,以便最佳地完成此操作。