RequireJS进阶-模块的优化及配置的详解

2023-01-27 10:01:07

概述

关于RequireJS已经有很多文章介绍过了。这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样，你将获得一些具有互相依赖关系的JavaScript文件。仅仅需要在你的HTML文档中引用一个基于RequireJS的脚本文件，所有必须的文件都将会被自动引用到这个页面上.

但是，在生产环境中将所有的JavaScript文件分离，这是一个不好的做法。这会导致很多次请求(requests)，即使这个些文件都很小，也会浪费很多时间。 可以通过合并这些脚本文件，以减少请求的次数达到节省加载时间的目的。
另一种节省加载时间的技巧是缩小这些被加载文件的大小，相对小一些的文件会传输的更快一些。这个过程叫作最小化 (minification)
，它是通过小心的改变脚本文件的代码结构并且不改变代码的形为(behavior)和功能(functionality)来实现的。例如这些：去除不必要的空格，缩短(mangling，或都压缩)变量(variables)名与函数(methods，或者叫方法)名，等等。这种合并并压缩文件的过程叫做代码优化(
optimization)。这种方法除了用于优化(optimization)JavaScript文件，同样适用于CSS文件的优化。

RequireJS有两个主要方法(method):
define()和require()。这两个方法基本上拥有相同的定义(declaration)
并且它们都知道如何加载的依赖关系，然后执行一个回调函数(callback function)。与require()不同的是，
define()用来存储代码作为一个已命名的模块。
因此define()的回调函数需要有一个返回值作为这个模块定义。这些类似被定义的模块叫作AMD (Asynchronous Module
Definition，异步模块定义)。

下面通过一个示例讲解如何优化RequireJS项目。（这段话来自下面的参考连接）

所需环境

Node.js、r.js、RequireJS、以及示例程序，示例程序的下载地址为：http://www.webdeveasy.com/code/optimize-requirejs-projects/todo-mvc.zip

配置参数介绍

涉及的操作请可以参考上面的示例，本文的主要目的主要是通过示例来讲解配置参数的使用。

appDir

appDir: './'

应用程序的*目录,如果这个选项被开启的话，那么你的脚本文件是这个目录路径下的一个子目录。这个是个可选项。如果没有设置的话，则通过baseUrl这个参数下的锚点来查找文件(?)。如果设置了该选项的话，那么这个路径下的所有文件都会被复制到dir指定的输出目录，并且baseUrl这个目录的路径是相对于该路径。

baseUrl

baseUrl: './js'

默认情况下，所以的模块都相对于这个路径存在(有人称为脚本的跟路径)，如果baseUrl没有明确指定的话，那么所有的模块路径都相对与build构建文件的路径。如果appDir已设置，那么baseUrl 的路径是相对与appDir。

mainConfigFile

mainConfigFile: '../some/path/to/main.js'

RequireJS的主配置文件。这里要区分配置文件和入口文件的区别，示例中的main.js即包含配置文件同时又是文件的入口文件。

paths

  1. paths: {
  2. "foo.bar": "../scripts/foo/bar",
  3. "baz": "../another/path/baz"
  4. },

参见： RequireJS进阶:配置文件的学习

map

map: {},

参见： RequireJS进阶:配置文件的学习

packages

packages: [],

参见： RequireJS进阶:配置文件的学习

dir

dir: "../some/path"

文件输出的*目录。如果没有指定的话，默认会创建一个“build”目录在build文件的路径中。所有相对路径是相对于构建文件。

keepBuildDir

keepBuildDir: true

在 RequireJS 2.0.2 中，输出目录的所有资源会在 build 前被删除。值为 true 时 rebuild 更快，但某些特殊情景下可能会出现无法预料的异常

shim

shim: {},

参见： RequireJS进阶:配置文件的学习

wrapShim

wrapShim: false,

禁止非模块包裹define函数。

locale

locale: "en-us",

国际化配置设置。

optimize

optimize: "uglify",

优化脚本文件的方式。值只能取下面的任何值中的一个。

  • "uglify": (default) uses UglifyJS to minify the code.

  • "uglify2": in version 2.1.2+. Uses UglifyJS2.

  • "closure": uses Google's Closure Compiler in simple optimizationmode to minify the code. Only available if running the optimizer using Java.

  • "closure.keepLines": Same as closure option, but keeps line returns in the minified files.

  • "none": no minification will be done.

skipDirOptimize

skipDirOptimize: false,

当设置为true时，优化器将会跳过非构建中被约束的JS文件。

generateSourceMaps

generateSourceMaps: false,

是否生成SourceMaps文件，什么是SourceMaps，参考SourceMaps

normalizeDirDefines

normalizeDirDefines: "skip",

2.1.11中：如果dir被声明且不为”none”，并且skipDirOptimize 为false，通常所有的JS文件都会被压缩，这个值自动设置为”all”。为了让JS文件能够在压缩过正确执行，优化器会加一层define()调用并且会插入一个依赖数组。当然，这样会有一点点慢如果有很多文件或者有大文件的时候。所以，设置该参数为”skip”这个过程就不会执行，如果optimize设置为”none”也一样。如果你想手动设置值的话：

  • 优化后：如果你打算压缩没在modules声明的JS文件，在优化器执行过后，你应该设置这个值为”all”

  • 优化中：但在动态加载过后，你想做一个会文件优化，但不打算在动态加载这些文件可以设置成”skip”

最后：所有生成的文件（无论在不在modules里声明过）自动标准化

uglify

  1. uglify: {
  2. toplevel: true,
  3. ascii_only: true,
  4. beautify: true,
  5. max_line_length: 1000,
  6.  
  7. //How to pass uglifyjs defined symbols for AST symbol replacement,
  8. //see "defines" options for ast_mangle in the uglifys docs.
  9. defines: {
  10. DEBUG: ['name', 'false']
  11. },
  12.  
  13. //Custom value supported by r.js but done differently
  14. //in uglifyjs directly:
  15. //Skip the processor.ast_mangle() part of the uglify call (r.js 2.0.5+)
  16. no_mangle: true
  17. },

使用UglifyJS进行代码压缩，具体参数配置可见UglifyJS

uglify2

  1. uglify2: {
  2. //Example of a specialized config. If you are fine
  3. //with the default options, no need to specify
  4. //any of these properties.
  5. output: {
  6. beautify: true
  7. },
  8. compress: {
  9. sequences: false,
  10. global_defs: {
  11. DEBUG: false
  12. }
  13. },
  14. warnings: true,
  15. mangle: false
  16. },

使用UglifyJS2进行代码压缩， 具体参数配置可见UglifyJS2

closure

  1. closure: {
  2. CompilerOptions: {},
  3. CompilationLevel: 'SIMPLE_OPTIMIZATIONS',
  4. loggingLevel: 'WARNING'
  5. },

如果用Closure Compiler优化，这个参数可以用来配置Closure Compiler，详细请看Closure Compiler的文档

optimizeCss

optimizeCss: "standard.keepLines.keepWhitespace",

是否优化CSS文件，以那种方式优化。

  • "standard": @import inlining and removal of comments, unnecessary whitespace and line returns.Removing line returns may have problems in IE, depending on the type of CSS.
  • "standard.keepLines": like "standard" but keeps line returns.
  • "none": skip CSS optimizations.
  • "standard.keepComments": keeps the file comments, but removes linereturns. (r.js 1.0.8+)
  • "standard.keepComments.keepLines": keeps the file comments and linereturns. (r.js 1.0.8+)
  • "standard.keepWhitespace": like "standard" but keeps unnecessary whitespace.

cssImportIgnore

 cssImportIgnore: null,

是否忽略 CSS 资源文件中的 @import 指令

cssIn

cssIn: "path/to/main.css",

一般用于命令行，可将多个 CSS 资源文件打包成单个 CSS 文件

out

out: "path/to/css-optimized.css",

一般用于命令行，可将多个 CSS 资源文件打包成单个 CSS 文件

cssPrefix

cssPrefix: "",

如果”out”和”cssIn”不是同一目录，并且在cssIn文件里面有url()相对目录的，用这个去设置URL前置。仅仅在优化后URL不正确的情况下使用。

inlineText

inlineText: true,

处理所有的文本资源依赖项，从而避免为加载资源而产生的大量单独xhr请求

useStrict

useStrict: false,

是否开启严格模式, 由于很多浏览器不支持 ES5 的严格模式，故此配置默认值为 false

pragmas

  1. pragmas: {
  2. fooExclude: true
  3. },

指定生成编译指示。如果源文件包含类似如下注释：>>excludeStart(“fooExlude”,pragmas.fooExclude); >>excludeEnd(“fooExclude”);那么以//>>开头的注释就是编译指示。excludeStart/excludeEnd和includeStart/includeEnd起作用，在includeStart或excludeStart中的编译指示值将参与计算来判断Start和End之前的编译指示是include还是exclude。如果你可以选择用”has”或编译指示，建议用”has”代替。 编译指示比较难于阅读，但是它在对代码移除上比较灵活。基于”has”的代码必须遵守JavaScript规则。编译指示还可以在未压缩的代码中删除代码，而”has”只能通过UglifyJS或者Closure Compiler来做。

pragmasOnSave

  1. pragmasOnSave: {
  2. //Just an example
  3. excludeCoffeeScript: true
  4. },

和”pragmas”一样，但只能在文件保存的优化阶段应用一次。”pragmas”可以同时在依赖映射和文件保存优化阶段应用。有些”pragmas”可能不会在依赖映射时被执行，例如在CoffeeScript的loader插件中，只想CoffeeScript做依赖映射，但是一旦这个文件被保存为一个javascript文件，CoffeeScript compiler就没用了。那样的话，pragmasOnSave就会用于在保存期排除编译代码。

has

  1. has: {
  2. 'function-bind': true,
  3. 'string-trim': false
  4. },

使用”has”允许trimming代码树。基于js的特征检测：https://github.com/phiggins42/has.js。代码树修饰仅仅在使用UglifyJS或Closure Compiler压缩时发生。更多请见：http://requirejs.org/docs/optimization.html

hasOnSave

  1. hasOnSave: {
  2. 'function-bind': true,
  3. 'string-trim': false
  4. },

和pragmasOnSave类似。

namespace

namespace: 'foo',

命名空间，完整实例可以参考 http://requirejs.org/docs/faq-advanced.html

skipPragmas

skipPragmas: false,

跳过执行pragmas

skipModuleInsertion

skipModuleInsertion: false,

如果是false，文件就不会用define()来定义模块而是用一个define()占位符插入其中。另外，require.pause/resume调用也会被插入。设置为”true”来避免。这个参数用在你不是用require()来创建项目或者写js文件，但是又想使用RquireJS的优化工具来合并模块是非常有用的。

stubModules

stubModules: ['text', 'bar'],

将模块排除在优化文件之外。

optimizeAllPluginResources

optimizeAllPluginResources: false,

如果不是一个文件的优化，描述输出目录的所有.js文件的插件依赖，如果这个插件支持优化成为一个单独的文件，就优化它。可能是一个比较慢的优化过程。仅仅在有些插件用了像XMLHttpRequest不支持跨域，并且生成的代码会被放在另一个域名。

findNestedDependencies

findNestedDependencies: false,

寻找require()里面的require或define调用的依赖。默认为false是因为这些资源应该被认为是动态加载或者实时调用的。当然，有些优化场景也需要将它们合并在一起。

removeCombined

removeCombined: false

如果设置为true，在输出目录将会删除掉已经合并了的文件

modules

  1. modules: [
  2. //Just specifying a module name means that module will be converted into
  3. //a built file that contains all of its dependencies. If that module or any
  4. //of its dependencies includes i18n bundles, they may not be included in the
  5. //built file unless the locale: section is set above.
  6. {
  7. name: "foo/bar/bop",
  8.  
  9. //create: true can be used to create the module layer at the given
  10. //name, if it does not already exist in the source location. If
  11. //there is a module at the source location with this name, then
  12. //create: true is superfluous.
  13. create: true,
  14.  
  15. //For build profiles that contain more than one modules entry,
  16. //allow overrides for the properties that set for the whole build,
  17. //for example a different set of pragmas for this module.
  18. //The override's value is an object that can
  19. //contain any of the other build options in this file.
  20. override: {
  21. pragmas: {
  22. fooExclude: true
  23. }
  24. }
  25. },
  26.  
  27. //This module entry combines all the dependencies of foo/bar/bop and foo/bar/bee
  28. //and any of their dependencies into one file.
  29. {
  30. name: "foo/bar/bop",
  31. include: ["foo/bar/bee"]
  32. },
  33.  
  34. //This module entry combines all the dependencies of foo/bar/bip into one file,
  35. //but excludes foo/bar/bop and its dependencies from the built file. If you want
  36. //to exclude a module that is also another module being optimized, it is more
  37. //efficient if you define that module optimization entry before using it
  38. //in an exclude array.
  39. {
  40. name: "foo/bar/bip",
  41. exclude: [
  42. "foo/bar/bop"
  43. ]
  44. },
  45.  
  46. //This module entry shows how to specify a specific module be excluded
  47. //from the built module file. excludeShallow means just exclude that
  48. //specific module, but if that module has nested dependencies that are
  49. //part of the built file, keep them in there. This is useful during
  50. //development when you want to have a fast bundled set of modules, but
  51. //just develop/debug one or two modules at a time.
  52. {
  53. name: "foo/bar/bin",
  54. excludeShallow: [
  55. "foo/bar/bot"
  56. ]
  57. },
  58.  
  59. //This module entry shows the use insertRequire (first available in 2.0):
  60. {
  61. name: "foo/baz",
  62. insertRequire: ["foo/baz"]
  63. }
  64. ],

列出要优化的模块。如果有依赖i18n的，只有root层会被包含进来除非locale:块在上面被声明过。

①仅定义模块会被转换成一个生成目标文件的名字，包含所有依赖项。i18n依赖同上，

create：true可用来生成在源文件目录不存在的给定模块名。如果源文件目录已经存在一个相同名称的模块，create参数就没用了；

override:可以重写全局的pragmas

②这个模块声明编译foo/bar/bop的所有依赖和foo/bar/bee及其所有依赖

③编译所有foo/bar/bip的依赖到一个文件，但是排除foo/bar/bop和它的所有依赖文件，如果想把另一个模块单独优化，这是一个很好用的方法

④excludeShallow只排除掉这个模块，但是如果输出模块的依赖和它有相同就保留不排除。

⑤这个模块声明表示用insertRequire（在2.0中新加入）

insertRequire

insertRequire: ['foo/bar/bop'],

如果目标模块在顶层级只调用了define没有调用require()，并且输出文件在data-main中使用，如果顶层没有require，就不会有任何模块被加载。定义insertRequire在文件尾部来执行其它模块，更多参见：https://github.com/jrburke/almond

name

name: "foo/bar/bop",

include

include: ["foo/bar/bee"],

insertRequire

insertRequire: ['foo/bar/bop'],

out

out: "path/to/optimized-file.js",

如果只优化一个模块（和它的依赖项），而且是生成一个单文件，你可以在行内定义模块的选项，以代替modules参数的定义方式，”exclude”, “excludeShallow”, “include”和”insertRquire”都可以以兄弟属性的方式定义。

deps

deps: ["foo/bar/bee"],

“include”的替换方案。一般用requirejs.config()来定义并用mainConfigFile引入。

out

  1. out: function (text, sourceMapText) {
  2. //Do what you want with the optimized text here.
  3. //Starting in 2.1.10, if generateSourceMaps was set to true
  4. //and optimize: 'uglify2' was used, then the second argument
  5. //to this function, sourceMapText, will be the text of the source map.
  6. },

在2.0，”out”可以是一个函数， 对单个JS文件优化可以调用requirejs.optimize()， 用out函数表示优化过后的内容不会被写到磁盘，而是传递给out函数

out

out: “stdout”

在2.0.12+， 设置”out”为”stdout”， 优化输出会写到STDOUT，这对于r.js整合其它命令行工具很有用。为了避免额外的输出”logLevel: 4”应该被使用。

wrap

  1. wrap: {
  2. start: "(function() {",
  3. end: "}());"
  4. },

wrap任何东西在start和end之间，用于define/require不是全局的情况下，在end里可以暴露全局对象在文件中。

wrap

wrap: true,

wrap的另一种方式，默认是(function() { + content + }())

wrap

  1. wrap: {
  2. startFile: "parts/start.frag",
  3. endFile: "parts/end.frag"
  4. },

用文件来wrap

wrap

  1. wrap: {
  2. startFile: ["parts/startOne.frag", "parts/startTwo.frag"],
  3. endFile: ["parts/endOne.frag", "parts/endTwo.frag"]
  4. },

多个文件的wrap

fileExclusionRegExp

fileExclusionRegExp: /^./,
跳过任何以.开头的目录和文件，比如.files, .htaccess等

preserveLicenseComments

preserveLicenseComments: true,

默认注释有授权在里面。当然，在大项目生成时，文件比较多，注释也比较多，这样可以把所有注释写在文件的顶部。

logLevel

logLevel: 0

设置logLevel。

TRACE: 0,

INFO: 1

WARN: 2

ERROR: 3

SILENT: 4

throwWhen

  1. throwWhen: {
  2. optimize: true
  3. }

在2.1.3，有些情况下当错误发生时不会抛出异常并停止优化，你可能想让优化器在某些错误发生时停止，就可以使用这个参数

onBuildRead

  1. onBuildRead: function (moduleName, path, contents) {
  2. //Always return a value.
  3. //This is just a contrived example.
  4. return contents.replace(/foo/g, 'bar');
  5. },

当每个文件被读取的时候调用这个方法来改变文件内容

onBuildWrite

  1. onBuildWrite: function (moduleName, path, contents) {
  2. //Always return a value.
  3. //This is just a contrived example.
  4. return contents.replace(/bar/g, 'foo');
  5. },

允许在写入目标文件前执行方法改变内容

onModuleBundleComplete

  1. onModuleBundleComplete: function (data) {
  2. /*
  3. data.name: the bundle name.
  4. data.path: the bundle path relative to the output directory.
  5. data.included: an array of items included in the build bundle.
  6. If a file path, it is relative to the output directory. Loader
  7. plugin IDs are also included in this array, but depending
  8. on the plugin, may or may not have something inlined in the
  9. module bundle.
  10. */
  11. },

每个JS模块集完成后执行。 模块集是指一个modules数组项。

rawText

  1. rawText: {
  2. 'some/id': 'define(["another/id"], function () {});'
  3. },

在2.1.3，种子raw text是模块ID的列表。这些文本内容用于代替模块的文件IO调用。用于模块ID是基于用户动态输入的情况，在网页生成工具中常用。

cjsTranslate

cjsTranslate: true,

在2.0.2中。如果为true, 优化器会添加define(require, exports, module) {})；包裹每一个没有调用define()的文件。

useSourceUrl

useSourceUrl: true,

在2.0.2，有点实验性质。每一个模块集最后都会添加一段//# sourceUrl的注释。

waitSeconds

waitSeconds: 7

参见： RequireJS进阶:配置文件的学习

skipSemiColonInsertion

skipSemiColonInsertion: false

在2.1.9，通常r.js插入一个分号在文件末尾，如果没有的话。

keepAmdefine

keepAmdefine: false

在2.1.10， 如果是true，就不会删除amdefine，详情见：https://github.com/jrburke/amdefine

allowSourceOverwrites

allowSourceOverwrites: false

在2.1.11中， 作为修复BUG的一部分https://github.com/jrburke/r.js/issues/444。设置为true就允许源代码进行重写覆盖。当然，为了安全起见，请正确配置，比如你可能想设置”keepBuildDir”为true。

帮助文档

参考链接：http://jiongks.sinaapp.com/blog/build-any-web-project-with-requirejs-optimizer/
英文文档（r.js）：https://github.com/jrburke/r.js/blob/master/build/example.build.js
参考链接：http://www.oschina.net/translate/optimize-requirejs-projects
参考链接：http://www.cnblogs.com/haoliang/p/3656475.html
参考链接：http://www.yfznw.com/node/22

上一篇：Codeforces Round #191 (Div. 2)


下一篇：SVG 学习（二）--- 创建组合交互式应用