使用r.js优化静态资源

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()声名依赖关系及设置模块值的模块,配置依赖关系与“浏览器全局”出口的脚本。

二、目录结构如下

使用r.js优化静态资源

三、执行命令

命令行cd 到 r.js所在目录,执行:node r.js -o build.js;

或在c:盘目录下执行:node E:/appdirectory/r.js -o E:/appdirectory/build.js

四、执行build后的目录

使用r.js优化静态资源

页面的依赖文件被合并到main.js中了,且在输出目录app-build中删除了对应的打个压缩文件。

让客户端使用压缩的文件,因为目录变了,所以需要做相应的调整:

  1.自己或通过脚本修改index.html引用文件的路径;

  2.后端修改配置,对请求进行重定向。

参考:r.js的配置项

上一篇:GNU :6.47 Function Names as Strings


下一篇:keil mdk中如何确保某一段程序不被优化掉