r.js压缩angular项目，Angular+requirejs+rjs实现初始化http请求数的优化

先看一下我整个项目的文件目录截图（dist文件夹是项目压缩后的文件）







1、正常情况下，仅仅使用angular+require，初次访问index.html，浏览器会加载:

main.js里面配置的require插件模块+路由初始化默认模块（蓝色为默认路由模块）



2、使用r.js，算是require的一个高阶应用

(1)首先，下载r.js，下载链接：http://requirejs.org/docs/download.html#rjs

   (2)将r.js放在项目根目录下

   (3)项目根目录下，新建一个build.js

3、配置build.js

这里直接拷贝我项目的build.js

({
appDir: './',
baseUrl: './js',
dir: '../grunt_test/dist',
modules: [
{
name: 'main'
}
],
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
//重点设置，防止压缩后变量名报错
removeCombined: true,
optimize: "uglify",
uglify: {
mangle: false  //false 不混淆变量名
},
findNestedDependencies: true,
//
paths: {
app: 'app',
angular: 'lib/angular/angular',
'angular-ui-router': 'lib/angular-ui-router/angular-ui-router',
uiBootstrapTpl: 'lib/angular-bootstrap/ui-bootstrap-tpls',
jquery:'lib/jquery/jquery-1.11.3.min',
bootstrap:'lib/bootstrap/bootstrap'
},
shim: {
angular: {
exports: 'angular'
},
uiBootstrapTpl: [
'angular'
],
'angular-ui-router': [
'angular'
],
bootstrap:[
'jquery'
]
}
})

说明一下重点的配置项：

 dir:压缩后的项目输入目录

有注释的地方，需要注意，那是防止压缩后变量名报错。（例如不能识别$rootScope）

path和shim：直接拷贝main.js里面的配置就可以了

4、好了，配置好了之后，直接在命令行进入项目目录：

输入语句: 

node r.js -o build.js

5、这样，就把整个项目压缩到dist文件下了，可以参考文章头部的项目目录截图，此时再访问dist文件夹下的index.html





我不说话！！！！