javascript - 使用requireJS优化器时，buildlayered javascript有什么优势？

Question

我正在尝试使用 requireJs 优化器 r.js ( here ) 来准备生产应用程序。

我可以让所有东西正常工作，并且可以将我所有的 js 压缩到一个 main.js 文件中，但是一个文件，很多问题......

基本问题:

1. requireJs 谈论的 Javascript 构建层是什么？我的单个文件？

现在我只优化了一个模块 main.js，它将所有依赖项捆绑到一个文件中(jquery、jquery-mobile，以及启动我的应用程序所需的所有其他内容)。

高级问题:
在一页上说我正在使用 jqplot 完成的图表，它使用了我在我的应用程序中其他任何地方都不需要的 xy 附加 javascript 文件。

1. 我需要做什么来防止这些文件出现在我的 main.built.js 文件中？
2. 我是否需要在我正在使用图形的页面上定义一个新模块 graph，然后优化此模块以将 xy 文件连接到 graph.built.js

非常先进:
我的页面由 gadgets = HTML/JS/CSS 的自治 block 组成，我在整个应用程序中重复使用它们，并且可以使用 JSON 对其进行自定义。

1. 如果通过 requireJS !text 插件加载小工具，我的 HTML 文件将在何处“优化为”大型单个 HTML 文件？
2. 如果我只想在每个页面上加载我需要的小工具，我是否必须为每个小工具创建一个具有依赖关系的每个页面的模块，然后优化 module index_page、module page_with_graph 等以确保只加载需要的内容？
3. 如果这样做，是否会在每个页面上重新请求小工具与缓存？

感谢您分享一些见解!

Answer 1

很棒的客人!

基本问题:

What is the Javascript buildlayer requireJs is talking about? My single file?

首先，让buildlayer改写成“bundle”，它有更客观的意义。所以它的连接模块集。它可以是单一的 - 如果您将模块放在一个构建中，或者如果您想为某些页面构建指定的构建，则可以是几个。

高级问题:

What do I need to do to prevent these files from showing up in my main.built.js file?

首先，这是我在书签中的一个非常有用的链接 - https://github.com/jrburke/r.js/blob/master/build/example.build.js

简而言之，您可以在 r.js 配置管理 include 和 exlcude 规则中配置 modules 部分达到目标

Do I need to define a new module graph on the page I'm using the graph and then optimize this module to concat xy files into graph.built.js

您可以只使用shim 并按需请求其他模块

非常高级:

If loading gadgets via the requireJS !text plugin, where will my HTML files be "optimized to" A large single HTML file?

不，它将在 build.js 中。这个结果我通过 !text 加载了模板

If I only want to load the gadgets I need on each page, do I have to create a module per page with dependencies for each gadget and then optimize module index_page, module page_with_graph, etc. to make sure only what's needed gets loaded?

您可以为每个页面构建自己的 buldle，但这不是最好的主意。当我有类似的问题时，我决定构建一个包，原因有两个——它加载一个包，它更容易控制 CDN 上的缓存并减少可能的错误和错误。但是，如果您需要单独的包，请点击发布到 modules 部分的链接。

If doing so, will re-request gadgets on every page vs caching

因此，如果您加载页面并且在 10 个模块中有 dep1 依赖文件将被加载一次(如果您没有在 buld.js 中)然后注入(inject)模块。当您重新加载页面文件时，可能会从浏览器缓存中获取或根据浏览器配置重新加载。

希望对您有所帮助。