上周Wijmo 2014 V2版本剛剛發布(下載地址), 有網友下載后發現僅僅使用了40個Widgets的一小部分，還需要加載全部的jquery.wijmo-pro.all.3.20142.45.min.js包？ 即對僅使用部分的Widget，有無辦法優化而提高網絡性能呢。
答案是肯定的，有辦法。
其中針對這種情況，使用Require.JS再合適不過了，實際上Wijmo 2013年已經開始支持Require.JS了，如下是Wijmo支持的JavaScript類庫的全圖。
本文就通過對比的方式說明使用RequireJs前后網絡性能，以使用Wijmo表格控件(wijgrid)說明。
RequireJS由James Burke創建，他也是AMD規范的創始人.
RequireJS會讓你以不同於往常的方式去寫JavaScript。你將不再使用script標簽在HTML中引入JS文件，以及不用通過script標簽順序去管理依賴關系。當然也不會有阻塞（blocking）的情況發生。
RequireJS不僅僅用於加載模塊依賴和相關的命令，RequireJS幫助我們寫出模塊化的JavaScript代碼，這非常有利於代碼的可擴展性和重用性。
當加載JavaScript模塊時，就會使用script標簽, 多個依賴的模塊，會按照引入的先后順序加載。故，在使用script標簽時，你需要按照此特定順序安排它們的加載。AMD(異步模塊定義)可以使得JavaScript模塊和它的依賴被異步的加載，同時，又能保證順序的准確。 兩者的對比，如圖所示。
RequireJS API 存在於RequireJS載入時創建的命名空間requirejs下。其主要API主要是下面三個函數:
- define– 該函數用戶創建模塊。每個模塊擁有一個唯一的模塊ID，它被用於RequireJS的運行時函數，define函數是一個全局函數，不需要使用requirejs命名空間.
var wijmo; define(["./wijmo.widget"function () { }
- require– 該函數用於讀取依賴，全局函數，不需要使用requirejs命名空間. 用於加載模塊依賴而不是創建一個模塊.
require(["knockout.wijmo", "wijmo.wijgrid", "wijmo.data.ajax"], function () { }
- config– 該函數用於配置RequireJS.
requirejs.config({ baseUrl: "../../../amd-js/", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "knockout": "knockout-3.1.0" } });
Wijmo的AMD目錄：Wijmo-Pro.3.20142.45\amd-js
不使用RequireJs，使用Wijmo的wijgrid表格控件
添加引用
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css">
<!--Wijmo Widget CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.wijmo.com/amd-js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/amd-js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/amd-js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/amd-js/globalize.min.js" type="text/javascript"></script>
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.45.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.js" type="text/javascript"></script>
在Body中添加table元素
<body>
<table id='demo-grid' />
</body>
在頁面加載完成后的ready事件中，添加wijgrid的實現腳本
$(document).ready(function () { $("#demo-grid").wijgrid({ allowSorting: true, data: [ [1, "Malkin", "Pit", 7, 2, 6, 8, 0, 29, "20:10", 2, 2], ... ], columns: [ { headerText: "ID", dataType: "number", dataFormatString: "n0" }, { headerText: "Skaters" }, ... ] }); });
通過簡單的代碼，實現的表格結果如圖所示
我們重新刷新--通過Ctrl + F5按鍵，然后觀察Chrome的Network調試工具欄
可以看到渲染完成，需要800ms左右的時間。
使用RequireJs，使用Wijmo的wijgrid表格控件
添加引用
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css">
<!--Wijmo Widget CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.css" rel="stylesheet" type="text/css">
<!--RequireJS AMD Loader-->
<script src="http://cdn.wijmo.com/external/require.js" type="text/javascript"></script>
配置RequireJs，我們使用wijmo提供的CDN
requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/", paths: { "jquery": "jquery-1.9.1.min", "jquery-ui": "jquery-ui-1.10.1.custom.min", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } });
運行結果如圖所示
總結，在使用了RequireJs后，性能從800ms提高到400ms，極大的提高了Web運行效率，Wijmo的RequireJs功能可以試試。