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

这次的项目用了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 模块相同的语句即可

不足的地方还望大家指正

【实践】require.js + r.js 代码打包压缩初体验的更多相关文章

  1. Highcharts.js -纯javasctipt图表库初体验

    一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性 ...

  2. js原型链与继承(初体验)

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  3. 代码先行-log4Net初体验

    1.安装 从http://logging.apache.org/log4net/download_log4net.cgi下载编译好的log4Net包并解压. 找到 bin\net\4.0\releas ...

  4. r.js压缩打包(require + backbone)项目开发文件

    最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...

  5. r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解

    本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装  npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...

  6. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

  7. r.js压缩打包

    AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...

  8. (转)yuicompressor 与 maven结合,打包,压缩js,css (一)

    js,css代码压缩 web站点需要对js,css代码进行压缩,打包,下面是利用maven进行打包压缩的配置 将压缩后的代码打入到war包中,并且压缩后的js,css文件名不变 <plugins ...

  9. 如何应用r.js对requirejs下的js代码合并

    1.在根目录新建build.js ({ baseUrl:'js', paths:{ jquery:'static/jquery-1.10.2.min', underscore:'static/unde ...

随机推荐

  1. C#字符串(Sring)操作

    //字符串访问            //string s = "ABCD";            //Console.WriteLine(s[0]);//第0位字符       ...

  2. CodeForces 785B Anton and Classes

    简单判断. 找第一类区间中$R$最大的,以及第二类区间中$L$最小的,判断距离. 找第二类区间中$R$最大的,以及第一类区间中$L$最小的,判断距离. 两种情况取个最大值即可. #include &l ...

  3. 洛谷P2507 [SCOI2008]配对 [DP,贪心]

    题目传送门 配对 题目描述 你有 n 个整数Ai和n 个整数Bi.你需要把它们配对,即每个Ai恰好对应一个Bp[i].要求所有配对的整数差的绝对值之和尽量小,但不允许两个相同的数配对.例如A={5,6 ...

  4. python 什么是全局解释器锁GIL

    什么是全局解释器锁GIL Python代码的执行由Python 虚拟机(也叫解释器主循环,CPython版本)来控制,Python 在设计之初就考虑到要在解释器的主循环中,同时只有一个线程在执行,即在 ...

  5. Socket学习笔记(一)

    1.socket介绍 我们知道两个进程如果需要进行通讯最基本的一个前提能能够唯一的标示一个进程,在本地进程通讯中我们可以使用PID来唯一标示一个进程,但PID只在本地唯一,网络中的两个进程PID冲突几 ...

  6. margin padding 图

  7. [BZOJ4826][HNOI2017]影魔(主席树)

    4826: [Hnoi2017]影魔 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 669  Solved: 384[Submit][Status][ ...

  8. [BZOJ2594][WC2006]水管局长加强版(LCT+Kruskal)

    2594: [Wc2006]水管局长数据加强版 Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 4452  Solved: 1385[Submit][S ...

  9. BZOJ 3238: [Ahoi2013]差异 后缀自动机 树形dp

    http://www.lydsy.com/JudgeOnline/problem.php?id=3238 就算是全局变量,也不要忘记,初始化(吐血). 长得一副lca样,没想到是个树形dp(小丫头还有 ...

  10. ssm整合总结(一)--第一步之使用maven搭建一个web项目

    本文内容来自:山硅谷,本文内容整合了任务2,任务3,任务4内容.http://www.gulixueyuan.com/my/course/50 1说明 1.1该项目使用的知识点有 1.1.1校验方式是 ...