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

我不说话！！！！

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

RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。
RequireJS 是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量.而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路 ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...
Node.js压缩web项目中的js,css和图片
2019独角兽企业重金招聘Python工程师标准>>> 安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别 ...
Angular: 升级Angular 14到Angular 15
N个月前写过一篇Angular: 升级Angular 13到Angular 14 的文章.现在Angular已经发布到了V16(非GA版本),那是时候把Angular项目升级到Angular 15了. ...
Angular项目中,基于esriLoader+iframe实现不同页面调用3.x与4.x ArcGIS JS API
场景: 现在有个项目同时涉及二维.三维地图功能,明确要求使用ArcGIS 平台.目前ArcGIS API For JS有两个系列3.x和4.x,3.x只能实现二维功能,4.x主要支持三维功能,同时也支 ...
angular项目引入reveal.js
angular项目引入reveal.js 一背景二解决方案 1 引入reveal.js 2 在angular.json的styles中引入reveal.js的css样式,作为全局样式. 3 修改 ...
Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
angular项目整合到.net mvc中
Webpack配置第一步必然是要先得到前端项目的打包资源,由强大的webpack来完成,目标是将angular的所有依赖以及应用主代码分别打包到polyfill.js.vendor.js.main. ...
RequireJS模块化后JS压缩合并
使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css, ...

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

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

最新文章

热门文章