提高效能：用RequireJS最佳化Wijmo Web頁面

提高效能：用RequireJS最佳化Wijmo Web頁面

上周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概述

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表格控制項

添加引用

            <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>        <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元素

在頁面載入完成後的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表格控制項

添加引用

    <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功能可以試試。