挡箭牌
PS：首先我不认为编译打包能解决所有的问题，而且打包虽然在某程度上+快了页面的加载速度，但是同时也为打包部署及版本控制，带来的一定的问题，这个需要一整套打包发布框架去处理的，但是但是……引入一整套打包发布系统，是非常增加系统复杂度……甚至变成杀鸡用牛刀的……完全脱离了我们做事情的出发点了……所以我们需要从实际使用的出发去审视这套方案，有需要的时候就用，非迫切需要的时候慎用。
高手们请直接无视这篇文章直接到官网上看说明，猛戳这里。
前戏
我们有部分项目使用 RequireJS 作为js包管理框架，在实际使用中有些小瑕疵（加载速度/重复刷新访问拒绝）。就研究了一下RequireJS 项目的打包方式，分享一下一些打包的经验。
RequireJS 做包管理有什么好处我就不再详细描述了，主要都是一种开发规范而已，用来规范Javascript这种自由奔放的开发语言的，以免项目的Javascript的代码野蛮生长到无法收拾的地步。
正文
整套示例代码可以checkout SVN：
http://192.168.33.2/svn/sam/rjs
项目里面已经内嵌了nodejs， 需要修改 build/app.build.js 配置文件，分别执行 build/trace.cmd & build/build.cmd ，就可以将整个项目的包，打包到一个js文件里面[ js/build/main.js ]。其中 build/r.js 是的RequireJS 官方的打包脚本。
页面嵌入js的对比：
打包前的js引入方式[ dev/index.html ]:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开发/测试环境页面</title>
<script type="text/javascript" src="../js/lib/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/lib/require/require-2.1.6.js"></script>
</head>
<body>
<script type="text/javascript">
requirejs.config({
baseUrl: "../js",
paths: {
own: 'lib/own'
},
urlArgs: "20141111"
});
require(['app']);
</script>
</body>
</html>
打包后的引入[ pro/index.html ]：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品环境页面</title>
<script type="text/javascript" src="../js/lib/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/lib/require/require-2.1.6.js"></script>
</head>
<body>
<!-- 这个就是打包后的js -->
<script type="text/javascript" src="../js/build/main.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl: "../js",
paths: {
own: 'lib/own'
},
urlArgs: "20141111"
});
require(['app']);
</script>
</body>
</html>
没了
发表评论
要发表评论，您必须先登录。