【实践】require.js + r.js 代码打包压缩初体验

第二个分享的是学校项目所接触到的新知识，代码压缩 + 代码打包

此次的项目用了require.js 这个插件作模块化管理的工具，所谓模块化就是在开发的过程当中将功能划分红一个独立的模块，使代码可读性更强更容易维护，可是一个模块就是一个js 文件多个模块就会产生出多个js 文件，这对于往后项目上线是很是不利的，由于会对服务器发送屡次请求拖慢页面加载速度，因此将多个模块打包以及压缩式颇有必要的一件事情。

 

闲话很少说，首先要说的是 r.js 这个优化工具，下载能够在require.js 官网下载：http://requirejs.org/docs/download.html#rjs

大概是这个位置，点击download 便可

r.js 要经过node.js 去驱动，没有安装node.js 的童鞋还须要安装一个node.js

用 r.js 压缩代码 是须要一个js 文件做为它的配置文件的，告诉 r.js 你要压缩的模块 ，压缩后的文件存放在哪里以及各个模块之间的依赖，若是你在开发的时候用了 require.js 就没必要再从新声明模块之间的依赖，省了一步功夫，我在开发过程当中用了 require,js 因此下面这里只介绍在用了 require.js 前提下 r.js 压缩打包代码的方法

首先准备工做是下载一个 r.js ，在你的项目中建立一个文件夹最好和 js 文件的文件夹处在同级

展开 tools文件夹后是这样

如今咱们先关注 build.js 这个文件，其他的稍后会介绍

build.js 就是r.js 的配置文件了，它长这样：

baseUrl: 指定要压缩文件的所存在的地方，这个路径我我的理解为相对于配置文件你的js 文件所在的位置，而个人js 文件与配置文件所在的文件夹同级因此 baseUrl的值为： "../js"

mainConfigFile: 这是require.js 所要加载的主入口文件（data-main 引用的文件） 它把全部模块的集中在里面调用能够说它依赖着全部模块文件。而在配置文件里，它起着相当重要的做用，全部它所依赖的模块都会根据它里面的依赖关系进行排列，r.js 经过这个main文件就会自动识别和它有关联的模块文件从而对各个模块进行压缩合并。若是你用的是 require.js 这个插件进行开发，写好这个配置 你的代码压缩工做就已经进行了一半了而没必要从新去整理合并模块的依赖关系

name:  须要被压缩的文件名。上面已经说过main 文件是依赖着全部模块的文件，将它锁定为压缩合并的目标是必然的。

out: 输出压缩后的文件的保存路径。这里不只包含压缩后的文件的路径以及要写明压缩后文件的文件名。

 

若是你的主文件中有一些第三方插件的语言文件，例如如下这个 (summernote 富文本编辑器插件中文语言插件)：

 

可能就须要修改源代码的语言部分的代码了，不然运行时就会报错，这个解决办法也是本人的暂时的解决办法，若是有更好的解决办法还望可以提出。

 

至此整个配置流程便完成了，贴上配置文件的代码

({
    baseUrl: '../js',
    mainConfigFile: "../js/personalPaegMain.js",
    name: "personalPaegMain",
    out: "../js/personalPage-built.js"
})

 

接下来即是经过命令行进行压缩代码的最后一步程序

win + r 运行 cmd

进入你项目所在的盘符

 

输入cd 命令 进入到盘符下项目中 r.js 的配置文件的文件夹

 

而后输入以下命令

 

回车，执行压缩打包

完成后即可以看到所压缩的模块以及最后输出的优化文件位置，将require.js 的data-main 后面的值换成最后优化输出的文件名便可

 

对比：

没有压缩打包前，浏览器会把全部的模块都加载

 

而压缩后

 

加载的文件只加载了 require.js 和 压缩后的文件，加载量减小了一大半

 

 

 

再说说压缩css 代码：

在上面能够看到压缩css 代码还须要增长一个 css 的文件用做导入所须要压缩的css 代码，配置文件以下

将你所须要合并的css 文件用 @import url(....) 来导入

 

下面是压缩css 代码的js 配置文件

cssIn: 是上面所说的css 导入文件

out: 压缩后的css 代码输出的位置

optimizeCss: 压缩css 代码的方式。这里我选择了保持换行，由于某些浏览器可能识别不了不换行的某些css 代码

贴上压缩css 配置文件的代码

@import url(../css/normal.css);
@import url(../css/modifypwd.css);

({
    cssIn: "../tools/buildcss.css",
    out: "../cssdist/modifyPwd-min.css",
    optimizeCss: "standard.keepLines"
})

 

 

写好配置文件以后在命令行中输入和压缩 js 模块相同的语句便可 

 

不足的地方还望你们指正