requirejs好久不见。
技术不存在过时一说，合适就好。
RequireJS就是一个工具库，它的模块管理遵守[AMD规范]，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
最近因为一个老的项目要做优化，该项目用requirejs做的模块加载，说起来
这个项目架子还是甚为奇。
MVC------------M和C用的是backbone,V选择了React,而且还引入了 JSX。
代码中使用了很多的第三方库，另外所有的UI公共组件都是单一的jsx文件,jsx文件是一个define定义的AMD模块(但是内部使用了React.createElement,没看到jsx的语法)。
经过分析，整体上目前上的优化手段有
1， 所有的同步ajax优化为异步---代码中竟然很多使用了（无特殊情况）同步的ajax请求
2， 首页资源加载方式优化----（首页document.write阻塞的方式，加载一些资源文件）
3， 全局加载资源优化，对冗余资源去冗
4， 静态资源分域伺服提供加载，优化加载性能.
5， 前后端分离
6， 静态资源开启gizp压缩优化，调解最小文件大小为适当值。
以上的手段优化后，在其中一个复杂的多表单共存的页面，该页面在第一次打开时拉取.jsx得请求数竟然到达100多个，严重影响该页面性能。
经过分析，还记得前文我们说的每个UI组件都是一个jsx文件，在当前这个复杂的页面，基本上80%以上的组件都会用上，所以该页面打开时，会通过XHR去获取所有的jsx文件，理解AMD模块的化，应该理解，必须 在jsx文件获取后，才会执行回调函数的逻辑。因此改页面所需要的jsx必须要适当的合并。
define(["react","jsx!js/component",,"jsx!js/multi"],function(React,Component,Multi){
//code
require(["jsx!js/component1",,"jsx!js/multi2"],function(Component1,Component2){
//code
....
})
....
})
那怎么合并呢？
肯定不是简单的把文件合起来就好，必须做好他的依赖管理，否则当组件间存在依赖时，就会出问题，找不到某个模块报undefined错误。
因此回过头，我们再一起看看requirejs
模块定义
无依赖的模块
define(function () {
return {
method1: function() {},
method2: function() {},
};
});
有依赖的模块
define(['module1', 'module2'], function(m1, m2) {
...
});
模块调用
1.require(['foo', 'bar'], function ( foo, bar ) {
foo.doSomething();
});
2. define内注入require
define(function ( require ) {
var isReady = false, foobar;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
foobar = foo() + bar();
});
return {
isReady: isReady,
foobar: foobar
};
});
3. 异步
define(['lib/Deferred'], function( Deferred ){
var defer = new Deferred();
require(['lib/templates/?index.html','lib/data/?stats'],
function( template, data ){
defer.resolve({ template: template, data:data });
}
);
return defer.promise();
});
错误处理
requirejs.config({
enforceDefine: true,
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min'
}
});
//Later
require(['jquery'], function ($) {
}, function (err) {
var failedId = err.requireModules && err.requireModules[0];
if (failedId === 'jquery') {
requirejs.undef(failedId);
requirejs.config({
paths: {
jquery: 'local/jquery'
}
});
require(['jquery'], function () {});
} else {
}
});
配置
require.config({
paths: {
"backbone": "vendor/backbone",
"underscore": "vendor/underscore"
},
shim: {
"backbone": {
deps: [ "underscore" ],
exports: "Backbone"
},
"underscore": {
exports: "_"
}
}
});
看到这里，该文件合并了吧，对~~~~
r.js出场了
npm install -g requirejs
node r.js -o
build.js文件内容
({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
{
name: 'main'
}
],
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone/backbone',
backboneLocalstorage: 'lib/backbone/backbone.localStorage',
text: 'lib/require/text'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
backboneLocalstorage: {
deps: ['backbone'],
exports: 'Store'
}
}
})
appDir：项目目录，相对于参数文件的位置。
baseUrl：js文件的位置。
dir：输出目录。
modules：一个包含对象的数组，每个对象就是一个要被优化的模块。
fileExclusionRegExp：凡是匹配这个正则表达式的文件名，都不会被拷贝到输出目录。
optimizeCss: 自动压缩CSS文件，可取的值包括“none”, “standard”,
“standard.keepLines”, “standard.keepComments”,
“standard.keepComments.keepLines”。
removeCombined：如果为true，合并后的原文件将不保留在输出目录中。
paths：各个模块的相对路径，可以省略js后缀名。
shim：配置依赖性关系。如果不是AMD模式定义的，就用shim指定模块的依赖
generateSourceMaps：是否要生成source map文件。
一个完整的文件例子
最终本项目的的build.js如下
({
appDir:'./',
baseUrl: 'static',
dir: "build",
mainConfigFile:'./static/config.js',
findNestedDependencies: true,
removeCombined:true,
generateSourceMaps:true,
modules: [
{
name: "main"
},
{
name: "admin"
}
]
})
node r.js -o build.js
补充
因为没有找到方法，用r.js去处理jsx文件，所以后来就把jsx文件全部改为js(因为里面并没有使用 jsx语法，其实质就是js)，最终使得可以通过r.js处理。