Home > Developer > Web Develop
Last week Wijmo V2 version just released (), a netizen downloaded after the discovery only used a small portion of 40 widgets, but also need to load all the Jquery.wijmo-pro.all.3.20142.45.min.js package? That is, the use of only part of the widget, there is no way to optimize and improve network performance.
The answer is yes, there is a way.
In this case, the use of require.js is more appropriate, in fact, Wijmo 2013 has begun to support Require.js, the following is the WIJMO supported JavaScript class library full map.
This article explains how to use the Wijmo Table control (Wijgrid) description by comparing the network performance before and after using Requirejs.
Requirejs Overview
Requirejs was created by James Burke, who is also the founder of the AMD specification.
Requirejs will let you write JavaScript in a different way than usual. You will no longer use the script tag to introduce JS files in HTML and to manage dependencies without the script tag order. Of course, there will be no blocking (blocking) situation happening.
Requirejs is not only used to load module dependencies and related commands, Requirejs helps us to write modular JavaScript code, which is very helpful for the extensibility and reusability of the code.
When the JavaScript module is loaded, the script tag is used, and multiple dependent modules are loaded in the order in which they are introduced. Therefore, when using the script tag, you need to schedule their loading in this particular order. AMD (Asynchronous module definition) allows the JavaScript module and its dependencies to be loaded asynchronously, while maintaining the accuracy of the sequence. The contrast between the two.
The Requirejs API exists under the namespace Requirejs created when Requirejs is loaded. The main API is the following three functions:
var Wijmo;define (["./wijmo.widget"function () {}function () {}requirejs.config ({ ".. /.. /.. /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 " } });AMD Directory of Wijmo: Wijmo-pro.3.20142.45\amd-js
Do not use Requirejs, use Wijmo's Wijgrid Table control
Add Reference
<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>
Add a TABLE element to the body
<body> <table id= ' Demo-grid '/></body>
In the Ready event after the page is loaded, add the Wijgrid implementation script
$ (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" }, ... ] }); });
Through simple code, the results of the table are implemented
We re-refresh--Via Ctrl + F5 button, then watch Chrome's Network debug toolbar
You can see that the rendering is complete and requires about 800ms of time.
Using Requirejs, use the Wijmo wijgrid Table control
Add Reference
<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>
Configure Requirejs, we use CDN provided by Wijmo
requirejs.config ({ "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 " }});Run results
Summary, after using the Requirejs, the performance from 800ms to 400ms, greatly improve the efficiency of the web, Wijmo Requirejs function can try.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
