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

二、目录结构如下

三、执行命令

命令行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的配置项