r.js主要功能:优化项目的静态资源。可以简化压缩代码,减少体积。指定模块将多个组件合并为一个文件,减少HTTP请求数量。具体使用步骤如下:
先把 r.js 文件放到项目根目录,再于项目根目录内新建一个 build.js 文件。
一、编写build.js(用独立文件的形式保存压缩命令的相关参数)
如:
({ appDir:'./', //将要被优化处理的目录(一般是项目根目录),该目录下的所有文件都会被优化并复制到dir指定的输出目录中,相对build.js文件的路径 dir: '../app-built', //指定顶级输出目录,所有需要被优化的文件将被复制并压缩到该目录,相对于build.js的路径,一般和项目源代码根目录并列。 baseUrl: 'scripts/app', // 模块根目录(base url),默认情况下所有模块资源都相对此目录。此路径也是相对于appDir的 mainConfigFile:'scripts/config.js', //使用requirejs的配置文件(路径相对于build.js),这样就不需要重复配置baseUrl、path和shim等相关属性了。【在config.js中不能使用变量】 paths: {jquery: 'jquery.min',a: 'b',c: 'c',d: 'd'}, //特别为某些模块设定别名,值为相对于baseUrl的路径 //需要合并的模块数组(不在此配置内的文件只会被单独压缩简化,不会被合并),常用参数:create:如果不存在,是否创建,默认 false;include:额外引入的模块,和 name 定义的模块一起压缩合并 modules: [ { name: '../main', //页面的入口js文件,会将其依赖全部压缩合并成一个文件;相对baseUrl的路径或模块Id都可以。 exclude:['underscore'] //exclude:排除指定模块及其依赖。有些模块有公共的依赖模块,例如基础库,在合并的时候每个都会压缩进去。使用 exclude 可以把这些模块在压缩在一个更早之前加载的模块中,其它模块不用重复引入。排除之后要确保页面会在别的地方引入,否则会报错。 }, // 将模块ID为 foo/bar/bop 和 foo/bar/bee 的模块打包成一个文件 { name: "foo/bar/bop", include: ["foo/bar/bee"]//可以合并不属于依赖关系中的文件及其依赖 }, ], removeCombined: true, //如果为true,将从输出目录中删除已被合并的文件 fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //匹配到的文件将不会被输出到输出目录中。它匹配了r.js、build.js和所有.scss后缀的文件。 optimize:"uglify", //JS代码优化方式,"uglify":使用 UglifyJS 压缩代码,默认值;"uglify2":使用 2.1.2+ 版本进行压缩;"none":不做压缩合并; uglify: { toplevel: true, ascii_only: true, beautify: true, max_line_length: 1000 }, // 使用 UglifyJS 时的可配置参数 optimizeCss:'standard',//css优化的参数,"standard.keepLines","none","standard.keepComments","standard.keepWhitespace","none" generateSourceMaps: false,//是否生成SourceMaps文件,便于调试压缩后的代码 useStrict: false,// 是否开启严格模式, onBuildRead: function (moduleName, path, contents) { //Always return a value.当每个文件被读取的时候可以调用这个方法来改变文件的内容 if (moduleName === "config") { return contents.replace("/Scripts", "/Scriptsbuild") } return contents; } })
Build.js配置参数
参数 | 描述 |
---|---|
appDir | 应用程序的目录(即<root>)。在这个文件夹下的所有文件将会被复制到dir参数标注的文件夹下。 |
baseUrl | 相对于appDir,代表查找文件的锚点(that represents the anchor path for finding files)。 |
dir | 这是一个输出目录,所有的应用程序文件将会被复制到该文件夹下。 |
modules | 一个包含多个对象的数组,每个对象代表一个将被优化合并的模块(module)。 |
fileExclusionRegExp | 任何与此规则匹配的文件或文件夹都将不会被复制到输出目录。由于我们把r.js和build.js放置在应用程序目录下,我们希望优化器(optimizer)排除这两个文件。 因此我们可以这样设置/^(r|build)\.js$/。 |
optimizeCss | RequireJS Optimizer会自动优化应用程序下的CSS文件。这个参数控制CSS最优化设置。允许的值: “none”, “standard”, “standard.keepLines”, “standard.keepComments”, “standard.keepComments.keepLines”。 |
removeCombined | 如果为true,优化器(optimizer)将从输出目录中删除已合并的文件。 |
paths | 模块(modules)的相对目录。 |
shim | 为那些没有使用define()声名依赖关系及设置模块值的模块,配置依赖关系与“浏览器全局”出口的脚本。 |
二、目录结构如下
三、执行命令
命令行cd 到 r.js所在目录,执行:node r.js -o build.js;
或在c:盘目录下执行:node E:/appdirectory/r.js -o E:/appdirectory/build.js
四、执行build后的目录
页面的依赖文件被合并到main.js中了,且在输出目录app-build中删除了对应的打个压缩文件。
让客户端使用压缩的文件,因为目录变了,所以需要做相应的调整:
1.自己或通过脚本修改index.html引用文件的路径;
2.后端修改配置,对请求进行重定向。
参考:r.js的配置项