requireJS的优化工具 ---- r.js
requireJS是javascript的模块加载器,是基于AMD规范实现的。
r.js是其提供的对模块进行打包和构建的一个工具
下载 r.js
创建r.js 的配置文件 build.js
build.js
({
baseUrl: './js/pages', //相对于appDir,代表要查找js文件的起始文件夹,下文所有文件路径的定义都是基于这个baseUrl的 appDir: './', //项目根目录
dir: './outdir', //输出目录,全部文件打包后要放入的文件夹(如果没有会自动新建的)
/* 有了dir,就不能使用out配置项了,你在编译时它有非常明确的提示 */
/*"appDir" is not compatible with "out". Use "dir" instead. appDir is used to copy whole projects, where "out" with "baseUrl" is used to just optimize to one file.*/
/*"appDir" 和 "out"是不兼容的,需要用"dir"代替, "appDir"是用来拷贝整个项目的,"out"和"baseUrl"仅是用来优化一个文件的*/
modules: [
//要优化的模块 —— 里面的配置项即各页面的 相对baseUrl路径的 省略后缀“.js”的 入口文件(入口文件 ---- 即加载页面时引入require.js的script标签上data-main属性所指定的文件)
//该属性必不可少,因为一个程序至少需要有一个入口
{ name:'main'},
{ name:'index'}
],
out: 'index-build.js', //输出文件名
name:'main',
fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //正则匹配过滤文件,匹配到的文件将不会被输出到输出目录去,这里过滤掉的是 r.js、build.js、*.scss三类文件
optimizeCss: 'standard',
removeCombined: true, //如果为true,优化器将从输出目录中删除已合并的文件
paths: { //各模块相对baseUrl的路径,直接从require.config的path配置中烤取即可
"underscore": "../libs/underscore/underscore-min",
"backbone": "../libs/backbone/backbone-min",
},
shim:{// 配置不符合AMD规范的模块,直接从require.config的shim配置中烤取即可
"underscore": {
exports: "_"
},
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
}
})
常用的build.js的参数属性解释:
r.js把各页面所需要用到的脚本全部都整合到各自的入口文件(一个或多个js)中去,从而减少了对服务器的请求。
mainConfigFile:'common.js' //多页面复杂工程的多个入库文件的统一的 require.config 的配置放置文件,相对baseUrl的路径
由于多页面工程需要多个入库文件,此时就会出现相同的 require config 的在一个工程下配置多次的问题,为了避免这种问题,可以将多个入库文件的相同config提出到一个js文件中,进行统一配置,
并且就会用到build.js的mainConfigFile参数来对其进行重新定义模块
baseUrl
---- 必不可少项,将要打包的所有文件的相对公共路径
appDir,dir,modules
---- 当一个程序有多个入口文件的时候
---- 将相应文件打包至配置的dir目录中
---- 各页面的入口文件不用改变,还是相应的入口文件即可
out,name
---- 当程序只有一个入口文件的时候
---- 将要打包的所有文件压缩到配置的out文件中
---- 项目入口index.html页面的入口文件需改为out的位置文件
实例可参考:https://github.com/requirejs/example-multipage-shim
一篇通俗易懂的r.js打包应用简例:http://www.tuicool.com/articles/iYNJbqZ
http://www.cnblogs.com/vajoy/p/3920163.html#!/follow
http://requirejs.org/docs/start.html
requireJS的优化工具 ---- r.js的更多相关文章
- requirejs的打包工具r.js
不建议用命令行,还是用配置文件比较方便--build.js. 我的build.js文件内容大概如下: ( { appDir : './', baseUrl : './scripts', dir : ' ...
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- requireJS中如何用r.js对js进行合并和压缩css文件
我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...
- requirejs实验002. r.js合并文件. 初体验.
requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...
- 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...
- requirejs 使用实例r.js打包
在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...
- 应用r.js来优化你的前端
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...
随机推荐
- PHP请求远程地址设置超时时间
file_get_contents 请求超时设置 $timeout = array( 'http'=> array( 'timeout'=>5//设置一个超时时间,单位为秒 ) ); $c ...
- python之函数(二)
上一篇中我们在函数体中的写的都是打印语句,用print来输出打印结果.但是在实际使用的时候,我们并不需要将结果输出在控制台上.这时候该如何解决呢? 1. return返回值. 我们可以将函数的结果通过 ...
- HDU 6189 Law of Commutation(规律)
题意: 给定n,a,求区间 [ 1 , 1<<n ] 的数b 满足 的个数 分析:打出暴力程序可以发现当a为奇数的时候结果为一: 当a为偶时 , a^b=2^(k+b)mod 2^n ; ...
- 玩转微信2次开发1_交互通信api.php(微擎版)
在2次开发中,涉及到比较多的也比较繁琐的就是服务器和微信服务器的交互 用户在公众号里操作回复关键词都会让微信服务器和开发者的服务器进行交互 用户一旦关注了某某公众号--微信后台会去查询该公众号是否连接 ...
- js数组去重 javascript版
//js数组去重 //思路: // 1.放入第一个元素 // 2.放入第n个元素,和第n个之前的元素就行比较,如果有重复,则跳过.没有重复就加入数组中 // 3.返回新的去重后数组 Array.pro ...
- python中变量,常量
1.变量 变量的作用:一个变化的值 把程序运算的中间结果临时存到内存里,以备后面的代码继续调用,这几个名字的学名就叫做“变量“ 查看变量在内存中的位置用id(name) 变量定义规则: 变量名只能是 ...
- Linux误挂载到根目录出现问题!!!!!!!!!!!!!!!
一.背景: 因根目录/空间不大,故而想将另一硬盘挂载到根目录下(后发现此想法很是幼稚): 二.过程: 1.成功输入命令挂载后,发现出现/上被挂了两个东西,且/下剩余空间还是原来一样大,才发现大错特错: ...
- Oracle 查看表结构视图
-- 创建视图 CREATE VIEW VIEW_TABLEASSELECT A.TABLE_NAME, A.column_name 字段名,A.data_type 数据类型,A.data_lengt ...
- js中的table导出成Excel表格
首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...
- pipline --学习 (-)
一,语法: 编写位置: pipline 启动docker pipeline { agent { docker 'maven:3.3.3' } stages { stage('build') { ste ...