项目优化再会requirejs

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>

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处理。