使用requireJS优化器时,buildlayered javascript的优点是什么?

时间:2013-04-18 16:19:38

标签: javascript optimization build requirejs require

我正在尝试使用requireJs optimizer r.js(here)进行首次尝试来准备生产应用程序。

我可以让一切工作正常,并且可以将我的所有js整理成一个main.js文件,但是一个文件,很多问题......

基本问题

  1. 什么是Javascript buildlayer requireJs正在谈论什么?我的单个文件?
  2. 现在我只优化了一个模块main.js,它将所有依赖项捆绑到一个文件中(jquery,jquery-mobile,以及启动应用程序所需的所有其他内容)。

    高级问题
    在一个页面上说我正在使用jqplot完成的图表,该图表使用了我在我的应用程序中不需要的xy其他javascript文件。

    1. 我需要做些什么才能阻止这些文件显示在我的main.built.js文件中?
    2. 我是否需要在我正在使用图表的页面上定义新模块graph,然后优化此模块以将xy文件连接到graph.built.js
    3. 非常先进
      我的页面由gadgets = HTML / JS / CSS的自治块组成,我在整个应用程序中重复使用,可以使用JSON进行自定义。

      1. 如果通过requireJS !text插件加载小工具,我的HTML文件在哪里“优化为”大单个HTML文件?
      2. 如果我只想在每个页面上加载我需要的小工具,是否必须为每个小工具创建一个具有依赖关系的模块,然后优化module index_pagemodule page_with_graph等来制作确定只需要加载什么?
      3. 如果这样做,会在每个页面上重新请求小工具与缓存吗?
      4. 感谢您提供一些见解!

1 个答案:

答案 0 :(得分:1)

很棒的猜测!

基本问题:

  

什么是Javascript buildlayer requireJs正在谈论什么?我的   单个文件?

首先,让buildlayer重新编写为“bundle”,它具有更多的客观含义。所以它的concatinated模块设置。它可以是单一的 - 如果您将模块放在一个或几个构建中,如果您想为某些页面构建指定的构建。

高级问题:

  

我需要做些什么来防止这些文件出现在我的文件中   main.built.js文件?

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

简而言之,您可以在 r.js 配置中配置模块部分,管理包含 exlcude 规则达到目标

  

我是否需要在我正在使用图表的页面上定义新的模块图   然后优化此模块以将xy文件连接到graph.built.js

您可以使用 shim 并在其他模块上按需提出请求

非常高级:

  

如果通过requireJS!文本插件加载小工具,我的HTML将在哪里   文件被“优化为”一个大的单个HTML文件?

不,它将在build.js中。这个结果我通过!text

加载模板
  

如果我只想在每个页面上加载我需要的小工具,我是否必须这样做   每页创建一个模块,其中包含每个小工具的依赖关系   优化模块index_page,模块page_with_graph等以确保   只需要加载什么?

您可以为每个页面构建自己的buldle,但这不是最好的主意。当我有类似的问题时,我决定构建一个捆绑包,原因有两个 - 它加载一个,它更容易控制CDN上的缓存并减少可能的错误和错误。但是,如果您需要单独的捆绑包,请按照已发布到模块部分的链接进行操作。

  

如果这样做,将在每个页面上重新请求小工具与缓存

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

希望它会有所帮助。