requirejs的优化工具

RequireJS有一个执行以下操作的优化工具
.将相关脚本合并到构建层中，并通过UglifyJS（默认值）或Closure Compiler（使用Java时的选项）将它们缩小
.通过内联@import引用的CSS文件并删除注释来优化CSS。
优化器是Node和Nashorn的r.js适配器的一部分，它被设计为在开发完成后可以作为构建或打包步骤的一部分运行，并且可以为用户部署代码。
优化器将仅组合在传递到顶级require和define调用的字符串字面数组中指定的模块，或者在简化的Commonjs包装中使用require（'name'）字符串文字调用。
因此，它不会找到通过变量名加载的模块：
var mods = someCondition ? ['a','b'] : ['c','d'];
require(mods);
但是如果指定如此，将包括“a”和“b”：
或者
define(['a','b'],function (a,b) {});
这种行为允许即使在优化之后也可以动态加载模块。可以使用include选项始终显式添加通过优化程序的静态分析找不到的模块。
demo目录如下
appdirectory

  .main.html
  . css
     .common.css 
     .main.css
  . scripts
     .require.js
     .main.js
     .one.js
     .two.js
     .three.js
.r.js(http://requirejs.org/docs/release/2.3.2/r.js)

main.html有require.js的脚本标签，并通过require调用加载main.js，如下所示：


    My App
    


    My App

main.js通过require调用加载one.js，two.js和three.js：
require(["one","two","three"],function (one,two,three) {
});
main.css的内容如下：
@import url("common.css");
.app {

background: transparent url(../../img/app.png);

}
命令行参数可与构建配置文件属性互换
可以在命令行中指定选项：
node r.js -o baseUrl=./scripts name=main out=main-built.js(特别注意路径)
或在构建配置文件中。在build.js(build.js和r.js在同一级)中，可以像下面这样指定相同的命令行参数：
({

baseUrl: "./scripts",name: "main",out: "main-built.js"

})
然后只是将构建配置文件的文件名传递给优化器：
node r.js -o build.js
命令行参数优先于构建配置文件设置，可以将它们混合在一起：
node r.js -o build.js optimize=none
命令行参数语法有限制。点被视为对象属性分隔符，以允许类似于paths.jquery = lib / jquery的东西在优化器中转换为以下内容：
paths: {

jquery: 'lib/jquery'

}
但这意味着不能将“core / jquery.tabs”的paths属性的值设置为某个值。这将不工作：paths.core / jquery.tabs = empty :,因为它会导致这个不正确的结构：
paths: {

'core/jquery': {
    tabs: 'empty:'
}

}
如果你需要设置一个路径像“core / jquery.tabs”，使用一个build.js文件，其中build选项指定为一个JavaScript对象，而不是使用命令行参数。
在运行时在浏览器中加载的主JS模块中的配置设置()默认情况下不被优化器读取
这是因为构建的配置设置可以非常不同，具有多个优化目标。因此，需要为优化程序指定一组单独的配置选项。
在版本1.0.5+的优化器中，mainConfigFile选项可用于指定运行时配置的位置。如果指定了你的主JS文件的路径，那么在该文件中找到的第一个requirejs（{}），requirejs.config（{}），require（{}）或require.config（{}）用作传递给优化器的配置选项的一部分：mainConfigFile: 'path/to/main.js
config：命令行，build profile，mainConfigFile的优先级。换句话说，mainConfigFile配置具有最低的优先级。
使用上面的示例设置，如果你只想优化main.js，可以使用这个命令，从appdirectory / scripts目录中：
node ../../r.js -o name=main out=main-built.js baseUrl=.
这将创建一个名为appdirectory / scripts / main-built.js的文件，其中将包含main.js，one.js，two.js和three.js的内容。
通常你不应该保存优化的文件与您的原始项目源。通常你会将它们保存到项目的副本，但为了使此示例更容易，它与源一起保存。将out =选项更改为任何您喜欢的目录，它有一个源的副本。然后，您可以将main-built.js文件名更改为main.js，以便HTML页面将加载文件的优化版本。
如果你想包含require.js和main.js源码，你可以使用这种命令：
node ../../r.js -o baseUrl=. paths.requireLib=./require name=main include=requireLib out=main-built.js
由于“require”是保留的依赖项名称，因此您创建一个“requireLib”依赖项并将其映射到require.js文件。
一旦优化完成，您可以将脚本标记更改为引用“main-built.js”而不是“require.js”，并且优化的项目只需要一个脚本请求。
如果你想包装你的构建文件，所以它可以用于没有一个AMD加载器，如RequireJS的页面，请参阅另一笔记中的优化常见问题。
可以使用excludeShallow选项来执行此操作。使用上面的示例设置，假设正在构建或调试two.js。可以使用此优化命令：
node ../../r.js -o name=main excludeShallow=two out=main-built.js baseUrl=.
如果你不想要main-build.js文件缩小，在上面的命令中传递optimize = none。
node ../../r.js -o name=main excludeShallow=two out=main-built.js baseUrl=. optimize=none
然后配置HTML页面，通过将“main”的路径配置为“main-built”来加载main-built.js文件，而不是main.js：
main.html如下:


    My App
    
    


    My App

现在，当加载此页面时，“main”的require（）将加载main-built.js文件。因为excludeShallow只是要排除two.js，所以two.js仍然会作为单独的文件加载，允许在浏览器的调试器中将其看作一个单独的文件，因此可以设置断点并更好地跟踪其各个更改。
当有一个脚本要从内容传递网络（CDN）或其他域上的任何其他服务器加载。
优化器无法加载网络资源，因此，如果希望将其包含在构建中，请确保创建一个路径配置将文件映射到模块名称。然后，要运行优化器，请下载CDN脚本，并将路径config传递到将模块名称映射到本地文件路径的优化器。
但是，更有可能不想在构建中包括该资源。如果脚本没有任何依赖关系，或者不想包含其依赖关系或以其他方式包含它们，则可以在路径配置中使用特殊的“empty：”方案，以便在执行时跳过该文件优化。
在main.js文件中，创建一个路径配置，为脚本提供一个模块名称。这可以做到即使脚本没有通过调用define（）定义一个模块。路径配置仅用于将短模块/脚本ID映射到URL。这允许使用不同的路径配置进行优化。在main.js中：
requirejs.config({

paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
}

});

require(['jquery'],function ($) {
});
然后，当运行优化器时，对路径使用'empty：'：
node ../../r.js -o name=main out=main-built.js baseUrl=. paths.jquery=empty:
或者，在构建配置文件中：
({

baseUrl: ".",out: "main-built.js",paths: {
    jquery: "empty:"
}

})
优化一个CSS文件
使用上面的示例设置，如果你只是想优化main.css，你可以使用这个命令，从appdirectory / css目录：
node ../../r.js -o cssIn=main.css out=main-built.css
这将创建一个名为appdirectory / css / main-build.css的文件，它将包含main.css的内容，正确调整url（）路径，并删除注释。
url()路径修复将始终修复相对于css在构建选项路径中的路径，而不是out build选项。
优化整个项目
优化器可以通过使用构建配置文件来优化项目中的所有CSS和JS文件
创建一个构建配置文件，将其命名为app.build.js，并将其放在scripts目录中。 app.build.js文件可以在任何地方生效，但是在下面的例子中，一定要调整相应的路径 - 所有路径都将相对于app.build.js所在的位置。 app.build.js示例：
({

appDir: "../",baseUrl: "scripts",dir: "../../appdirectory-build",modules: [
    {
        name: "main"
    }
]

})
此构建配置文件告诉RequireJS将所有appdirectory复制到名为appdirectory-build的同级目录，并将所有优化应用于appdirectory-build目录中。强烈建议您使用与源目录不同的输出目录 - 否则，当优化程序覆盖源时可能会发生错误。
RequireJS将使用baseUrl来解析任何模块名称的路径。 baseUrl应该相对于appDir。
在modules数组中，指定要优化的模块名称，在示例中为“main”。 “main”将映射到项目中的appdirectory / scripts / main.js。构建系统然后将跟踪main.js的依赖性，并将它们注入到appdirectory-build / scripts / main.js文件中。
它还将优化在appdirectory-build中找到的任何CSS文件。
要运行构建，请从appdirectory / scripts目录中运行此命令：
node ../../r.js -o app.build.js
一旦构建完成，您可以使用appdirectory-build作为您的优化项目，准备部署。
优化多页项目参看：

优化工具的调优
1.最大的时间耗竭是缩小。如果您只是将构建作为开发工作流程的一部分，请将optimize设置为“none”。
2.如果进行整个项目优化，但只想缩小在模块选项中指定的构建层，而不是构建输出目录中的其余JS文件，则可以将skipDirOptimize设置为true。
3.通常，每次运行整个项目优化都将删除由dir指定的输出构建目录以保持清洁。一些构建选项，如onBuildWrite，将修改输出目录，以危害相同的文件做两次的方式。但是，如果除了构建图层缩小之外没有额外的文件转换，您可以进行简单构建，那么可以将keepBuildDir设置为true，以便在运行之间保持构建目录。然后，只有在构建运行之间已更改的文件将被复制。
4.从版本2.1.2开始，如果optimize设置为“none”，优化器将默认采用一些速度快捷方式。但是，如果您使用“none”进行优化，并且计划在优化器运行后缩小构建的文件，则应将normalizeDirDefines设置为“all”，以便define（）调用正确标准化以承受缩减。如果您通过optimize选项进行缩小，那么您不需要担心设置此选项。
与HAS.JS的整合
has.js(是一个伟大的工具，为您的项目添加轻松的功能检测。有一些优化器支持has.js测试的优化代码路径。
如果你的代码使用如下测试：
if (has("someThing")) {

//use native someThing

} else {

//do some workaround

}
可以在构建配置中使用true或false值为一些has（）测试定义一个has对象，优化器将用true或false值替换has（）测试。
如果你的构建配置文件看起来像这样：
({

baseUrl: ".",name: "hasTestModule",out: "builds/hasTestModule.js",has: {
    someThing: true
}

})
然后优化器将上面的代码示例转换为：
if (true) {

//use native someThing

} else {

//do some workaround

}
然后，如果在r.js 0.26.0或更高版本中使用“uglify”的默认优化设置，或者如果将优化设置设置为“closure”（在Java下运行），则缩小器将优化死代码分支！所以你可以做你的代码的自定义构建，为一组has（）测试优化。
资源映射
版本2.1.6及更高版本对源地图提供实验性支持。它用于将缩小的，捆绑的代码映射到未分级的，单独的模块，并且仅当optimize被设置为“uglify2”时。 optimize设置为“closure”只允许将缩小的，捆绑的代码映射到未分类的捆绑代码（仅当在使用Rhino的Java下运行时才可用闭包）。未分级的文件将以“.src.js”文件扩展名显示在开发人员工具中。
要启用源映射生成，请将generateSourceMaps设置为true。由于minifier需要完全控制缩小文件以生成源映射，所以preserveLicenseComments应显式设置为false。有一种方法可以在缩小的源中获取一些许可证注释
优化器支持sourceURL（通过将useSourceUrl设置为true），用于将组合模块作为单独文件进行调试。但是，这只适用于非缩略代码。源映射将缩小的文件转换为非缩小版本。将useSourceUrl与generateSourceMaps一起使用没有意义，因为useSourceUrl需要源值作为字符串，这将禁止与generateSourceMaps结合使用的有用的缩小。
所有配置选项参看

部署技术
r.js优化器旨在通过在其上添加其他代码来提供可用于不同部署方案的一些原语。有关如何以这种方式使用优化器的想法，请参阅
 。
常见的陷阱
1.不要在JavaScript的源区域中指定输出目录
2.例如，如果你的baseUrl是'js'，你的构建输出进入'js / build'，那么在每个优化运行中生成的额外的嵌套文件可能会出现问题。本指南仅适用于非单文件优化的优化。
3.避免在baseUrl外部的优化名称name: '../main'
4.优化可能会覆盖或将文件放在输出目录之外。对于这些情况，创建一个路径配置将该文件映射到本地名称，如：
paths: {

main: '../main'

}
然后使用名称：name: 'main'用于优化目标。
5.注意shim config的构建限制。特别是，您无法从CDN加载垫片库的依赖关系。有关详细信息，请参阅fig-shim">http://www.requirejs.org/docs...

requirejs的优化工具

My App

My App

相关推荐