描述
随着前端开发的重要性，以及业务的复杂性，前端的模块化开发也被大众所接收，最常见的js框架requireJs，一个js文件对应一个模块，方便开发人员调试与维护，但是一个文件对应一个模块增加了http请求，降低了网站的性能。
幸运的是requireJs提供了压缩工具r.js(点击下载)，r.js需要node(Node 0.4.0 或更高版本，点击下载)环境支持，安装完node就可以在命令行里对前端代码进行优化了。
1.可以在命令行执行，如下：
node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js
2.也可以建一个配置文件，如build.js,代码如下：
{ appDir: "../js", baseUrl: "../js", dir: "../dist", optimize: "uglify", optimizeCss: "standard.keepLines", mainConfigFile: "../js/main.js", removeCombined: true, fileExclusionRegExp: /^\./, modules: [ { name: "" }, { name: ‘‘ } ] }
这时只需在命令行中输入：
|
1
|
node r.js -o build.js |
注意：r.js和build.js放在同一个文件夹
配置参数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
({ appDir: ‘../client‘,
baseUrl: ‘js‘,
/*paths:{//baseUrl
app: ‘app‘
},*/
//该路径以当前路径为起点
dir: ‘../client-build‘,
// Include the main configuration file.
//该路径以当前路径为起点
mainConfigFile: "./js/main.js",
//加上下面这个modules，完成的是合并操作
//路径apppDir + baseUrl + main.js
//模块的入口文件，会从./client/js/main.js中寻找其所有的依赖项，并把他们合并成一个js文件
modules:[
{
name:‘config‘
}],
// Output file.
//out: "./js/config.js",
// Root application module.
//name: "config",
removeCombined:true,
optimizeCss:‘standard‘,
// Do not wrap everything in an IIFE.
wrap: false,
//optimize (none/uglify/closure) 是否压缩，默认设置为optimize = uglify,
//none （OK：经测试，该参数正解）只合并不压缩，可以压缩成一个文件，但文件里面依旧保留格式，方便调试的时候查看代码
//uglify 只压缩不合并 (亲测，既压缩又合并)
//closure 压缩而且合并（亲测，合并不压缩）
//optimize:"closure",
//合并后的文件，顶部会自动生成一堆说明性的文字，包括版权啊，等等，加了下面的参数，则不再生成
preserveLicenseComments: false,
//
//下面两组的作用是 把js文件中的console.log删除
pragmas: { cacheBust: false
},
onBuildWrite: function
(moduleName, path, contents) {
// return contents;
return
contents.replace(/console.log(.*);/g, ‘‘);
}
}) |
常见问题
压缩合并后会出现路径错误问题，主要是因为，js代码位置变了，例如：
模块a中动态加载样式，压缩后，模块a整合到其他模块中，路径发生变化
这时需要修改js代码，动态判断路径，或者在调用模块是封装模块，通过require加载模块也能解决问题