使用r.js打包js文件

之前的文章里有介绍requirejs的基本使用方法,但是直接使用requirejs会暴露出一个问题,就是当模块过多的时候,requirejs就会引入许多js文件,大大的增加了请求数,那么有的朋友就要说了,我们自己压缩那些模块文件不就行了么,其实仔细想想这样到底行不行,答案是行!但是很麻烦:

1. 首先一般我们写模块时不会去定义模块名字,因为模块名字默认就是js文件名字,如果自己手动去写模块名,就增加了额外的工作量。

2. 加载顺序的问题,自己手动压缩,就要严格把控好模块的先后顺序(特别是有jquery及jquery插件的情况下),否则很容易出错。

针对这些问题,requirejs给出了解决方案,就是r.js,r.js就是针对用requirejs进行模块化开发后的打包压缩问题的。r.js下载

那么下面就来介绍如何使用r.js来打包压缩我们的模块们:

1. 把r.js放在我们的项目根目录中。

2. 新建一个built.js,内容如:

({
    baseUrl: ‘./static/scripts/src/‘,
    name: "../../../main",
    paths: {
        ‘jquery‘: "vendor/jquery/jquery",
        ‘jquery.email‘: "plugin/jquery.email",
        ‘aaa‘: "moudle/aaa/aaa",
        ‘bbb‘: "moudle/bbb/bbb",
        ‘ccc‘: "moudle/ccc/ccc"
    },
    shim: {
        ‘jquery‘: {
            exports: "$"
        },
        ‘jquery.email‘: {
            deps: ["jquery"],
            exports: "jQuery.fn.hEmail"
        }
    },
    out: "main-built.js",
})

built其实就是一个打包压缩的配置文件,这里我用的是之前文章初始requirejs(一)中的例子,这样看built.js的代码是不是很熟悉,就像require的配置js一样?事实就是差不多的,那我们来解释下不大一样的部分,name其实就是那个requirejs的入口文件,output就是打包之后的文件名,还有个叫dir的属性,我这里没有使用,是用来配置输出的文件目录的(比如dir: ../production,这样就直接输出到生产环境了),当然还有其他的属性,这里就不介绍了,详细请参考官网

下面我们来看看输出过程:

最后生成了main-built.js文件,然后我们试着把原先代码引用的地方替换掉,

<script data-main="main-built.js" src="static/scripts/src/vendor/require/require.js"></script>

结果,页面还是能正常显示,模块还是正常加载的,而且我们的js引用就变成了一个,大大的减少了请求数,完美!

时间: 2024-10-09 06:00:45

使用r.js打包js文件的相关文章

r.js 打包压缩文件(依赖require)

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求. 要使用r.js需下载r.js文件( 点我下载 ),将其放到你的项目根目录:还需要安装nodeJS(点我下载),以便通过命令行来执行r.js功能. 下面是我项目 幸福来敲门的目录结构.从index.html结构的data-mian可以看出模块的入口是app.js. app.js里面是这样一小段代码: 注释

用 requirejs 的 R.js 打包css + js

最近用requirejs做了一个项目,实现了模块化的开发方式,通过声明将依赖引入,有效的管理了各个模块之间的依赖关系,开发也有条不紊的进行,但是最近要上线,就面临着一个打包的问题,因为js模块化,导致js文件很多,所以要将其压缩成一个文件. 一.压缩js 1.首先你要先有nodejs环境,没有可以去装一个 2.你得下载R.js 3.新建一个build.js ({ baseUrl: "../src/main/webapp/static/js", name: "app"

转载 r.js打包经验

例子1 先是HTML页面 <!DOCTYPE html> <html>     <head>         <title>My App</title>         <link rel="stylesheet" type="text/css" href="css/main.css">         <script data-main="scripts/m

requirejs 使用实例r.js打包

在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install [email protected]1.11.1 --save 创建基本目录: js/main.js&test.js css/index.css index.html build.js copy requirejs目录下的r.js到根目录 创建导出目录:one 测试目录创建完成! index.html <!DOCTYPE html> <

gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/4982646.html http://www.tuicool.com/articles/viequay 实现要点: 1.如何运行gulp的任务,加入新建好一个如下任务: // 语法检查 gulp.task('jshint', function () { gulp.src('js/**/*.js') .p

Rollup处理并打包JS文件项目实例

关于Rollup rollup是一款用来es6模块打包代码的构建工具(支持css和js打包).当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用. 它的优点有如下: 能组合我们的脚本文件. 移除未使用的代码(仅仅使用ES6语法中). 在浏览器中支持使用 Node modules. 压缩文件代码使文件大小尽可能最小化. Rollup最主要的优点是它是基于ES2015模块的,相比于webpack或Browserify所使用的CommonJS模块更加有效率,

gulp打包js/css时合并成一个文件时的顺序解决

1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js'))//合成到一个js .pipe(gulp.dest(buildBasePath+'js'))//输出到js目录 .pipe(uglify())//压缩js到一行 .pipe(concat('build.min.js'))//压缩后的js .pipe(gulp.dest(buildBasePat

js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu

PHP根据传入参数合并多个JS和CSS文件的简单实现

HTML(使用方法): 复制代码代码如下: <link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /><script type="text/javascript" src="jsmin.php?get=jquery-1.6.