requireJs压缩合并路径问题
描述
随着前端开发的重要性,以及业务的复杂性,前端的模块化开发也被大众所接收,最常见的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加载模块也能解决问题
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。