requirejs的Optimizer 对require项目的合并与压缩

4776次浏览

前言

我博客前面关于requirejs的文章,写了好几篇了,关于requirejs快速入门,可以看下http://www.haorooms.com/post/requirejs_sy_lj 那项目中用requirejs方式书写和管理js,效果是不言而喻的,但是你用requirejs引入的依赖文件,虽然是异步的,但是还是会加载,还是会发生多次http请求!那么如何把这些js文件都合并到一起呢?这就引入了Optimizer,关于Optimizer,我们可以详见:http://requirejs.org/docs/optimization.html 这里有Optimizer的文档和用法。

但是,一般很多文档都是晦涩难懂的,其实,明明是很简单的问题,很多文档写的看起来很复杂,我在这里简单介绍一下requirejs的Optimizer,帮助大家迅速学会和使用Optimizer。

使用步骤。

1、需要安装node环境。

关于安装node,windows下面很简单,关于linux,请看http://www.haorooms.com/post/2n

具体就不多介绍了

2、需要下载r.js

r.js的下载地址是http://requirejs.org/docs/download.html#rjs

下载好以后就可以在命令行里对前端代码进行优化了。r.js 的参数传递使用方式,一是直接加在命令行后面,如下:

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

这种方式适合简单地配置,一般情况下不推荐使用这种方式,我们一般用build.js进行文件的配置!

3、build.js 的配置代码案例如下:

{
    baseUrl: "../js",
    dir: "../dist",
    optimize: "uglify",
    optimizeCss: "standard.keepLines",
    mainConfigFile: "../js/main.js",
    removeCombined: true,
    fileExclusionRegExp: /^\./,
    modules: [
        {
            name: "app/dispatcher",
        },
        {
            name: "app/in-storage",
            exclude: [
                "jquery",
                "app/common",
                "pkg/DatePicker/app"
            ]
        }
    ]
}

配置好了之后,我们直接运行

node r.js -o build.js

就可以了。文件就会压缩到dist目录。

关于build.js的详细参数介绍,请看:https://github.com/jrburke/r.js/blob/master/build/example.build.js

4、build.js关于基本参数,如下:

appDir

应用程序的最顶层目录。可选的,如果设置了的话,r.js 会认为脚本在这个路径的子目录中,应用程序的文件都会被拷贝到输出目录(dir 定义的路径)。如果不设置,则使用下面的 baseUrl 路径。

baseUrl

默认情况下,所有的模块都是相对于这个路径的。如果没有设置,则模块的加载是相对于 build 文件所在的目录。另外,如果设置了appDir,那么 baseUrl 应该定义为相对于 appDir 的路径。

dir

输出目录的路径。如果不设置,则默认为和 build 文件同级的 build 目录。

optimize

JavaScript 代码优化方式。可设置的值:

  • "uglify:使用 UglifyJS 压缩代码,默认值;
  • "uglify2":使用 2.1.2+ 版本进行压缩;
  • "closure": 使用 Google's Closure Compiler 进行压缩合并,需要 Java 环境;
  • "closure.keepLines":使用 Closure Compiler 进行压缩合并并保留换行;
  • "none":不做压缩合并;

optimizeCss

CSS 代码优化方式,可选的值有:

  • "standard":标准的压缩方式;
  • "standard.keepLines":保留换行;
  • "standard.keepComments":保留注释;
  • "standard.keepComments.keepLines":保留换行;
  • "none":不压缩;

mainConfigFile

如果不想重复定义的话,可以使用这个参数配置 RequireJS 的配置文件路径。

removeCombined

删除之前压缩合并的文件,默认值 false。

fileExclusionRegExp

要排除的文件的正则匹配的表达式。

modules

定义要被优化的模块数组。每一项是模块优化的配置,常用的几个参数如下:

  • name:模块名;
  • create:如果不存在,是否创建。默认 false;
  • include:额外引入的模块,和 name 定义的模块一起压缩合并;
  • exclude:要排除的模块。有些模块有公共的依赖模块,在合并的时候每个都会压缩进去,例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中,其它模块不用重复引入。

总结

requirejs也可以结合上节课的grunt插件进行,具体可以看下grunt插件中的https://www.npmjs.com/package/grunt-contrib-requirejs

总之,我们进行压缩的目的是减少http请求,提高网站速度,对网站性能进行优化,大家选择什么方式压缩都可以。

Tags: requirejs压缩前端

相关文章: