Dojo Build package standalone JS file optimization load significantly shorten page load time __js

Dojo Build Package standalone JS file optimization load significantly shorten page load time

blog.csdn.net/joyous/article/details/79905937

Dojo is a very powerful JS open source front-end library, design avantgarde, low coupling, each module (control) JS file Independent, the use is very convenient, to meet the vast majority of enterprise Web application development, but because of JS file dispersion, if not packaged compression direct use, especially on the page exists Dijit or Dojox control, loading a large number of JS files will cause the page to expand for a long time.

While dojo also provides a build packaging tool that solves the problem of page load optimization at release time, the Dojo build consolidates the modules required by the page into a single file, so the process of loading the Dojo page by the browser can be greatly simplified and the load time greatly shortened.

Dojo build needs to download the full source version of Dojo, this version of Dojo is also debug version, the JS code is not compressed, fully readable, and only this version of Dojo with a dojo build, but the use of dojo builds requires another A software environment support, that is, Java, here is not introduced separately, my blog has other articles on the installation and configuration of Java, please read it by yourself.

Dojo Download https://dojotoolkit.org/download/

After the download is extracted to the hard drive, you can see the following directories, dojo build is in util.

Here is the profile configuration for the dojo build, which can be added to the configuration file if you need to import new modules, or you can remove unwanted modules.

dependencies = {layers: [{name: "Dojo-mini.js", Dependencies: ["Dojo.loadinit", "Dojo.text", "dojo.i18n", "Dojo.parser", "Dojo._base.lang", "Dojo.date", "Dojo . Date.stamp "," Dojo.date.locale "," Dojo.node "," Dojo.data.ItemFileWriteStore "," do
        Jo.data.ItemFileReadStore "," Dojo.request.node "," Dojo.date.stamp "," Dojo.selector.lite ",
        "Dojo.selector.acme", "Dojo.dom", "Dojo.on", "dojo.html", "dojo.dom-attr", "Dojo.dom-class", "Dojo.has", "Dojo.hash", "Dojo.json", "Dojo.node", "Dojo.window "," Dojo.dnd.Source "," Dojo.dnd.Target "," Dojo.dnd.AutoSource "," dojox.s Torage "," Dojox.storage.GearsStorageProvider "," Dojox.storage.WhatWGStorageProvider "," Dojox.stora Ge. Flashstorageprovider ", "Dojox.flash", "Dijit.dijit", "Dijit.form", "Dijit.form.CheckBox", "Dijit.form." Button "," Dijit.form.TextBox "," Dijit.form.RadioButton "," Dijit.form.NumberTextBox "," Diji T.form.combobutton "," Dijit.layout.BorderContainer "," Dijit.layout.ContentPane "," dijit.layout.Acc Ordioncontainer "," Dijit.layout.ContentPane "," Dijit. Menu "," Dijit. MenuBar "," Dijit. Menubaritem "," Dijit. MenuItem "," Dijit. Popupmenubaritem "," Dijit. Popupmenuitem "," Dijit. Dropdownmenu "," Dijit. Menuseparator "," Dojox.mobile.bidi.IconItem "," Dijit.
        Widgetset "," Dojox.grid.DataGrid "," Dojox.grid.cells "," Dojox.grid.cells.dijit ", "Dojox.grid.DataSelection",]}, prefixes: [["Dijit],". /dijit "], [" Dojox ",". /dojox "], [" Themes ",".
 /themes "]]};

After copying the above configuration, a name single.profile.js is stored in the Util\buildscripts\profiles directory.

Go to the console and jump to the Util\buildscripts directory:

Enter build command: BUILD.bat profile=single action=release Releasename=1.13.0-mini Optimize=shrinksafe

Parameter profile specifies the single.profile.js inside the util\buildscripts\profiles.
The action and Releasename specify the publishing directory and output directory
Optimize specifies the way to package optimizations, removing line breaks.

Start packing automatically:

After a few 10 seconds, the package is complete, if the configuration of the omission of compliance relationship will not affect the use, Dojo will be alone to invoke the missing JS file.

Back in the Explorer, you can see one more catalog release and the new packaged dojo is inside.

1.13.0-mini the output directory specified by the output parameter of the batch setting

Call, you need to refer to both the standard dojo.js and the generated dojo-mini.js.

<script type= "Text/javascript" charset= "Utf-8" src= "Scripts/dojo/1.13.0-mini/dojo/dojo.js"
  Parseonload:true, Isdebug:false, locale: ' en-US ' ></script>
<script type= ' Text/javascript ' charset= "Utf-8" src= "Scripts/dojo/1.13.0-mini/dojo/dojo-mini.js" djconfig= "Parseonload:true, Isdebug:false
  , Locale: ' En-US ' "></script>

By copying the directory 1.30.0-mini to the Web project and then refreshing the page in the HTML page, let's compare the load time with the original reference and the package reference:

This is the original, referencing only the dojo.js loading screenshot:

This is an optimized load, while referencing the dojo.js and Dojo-mini.js scenarios:

The same page, after a number of forbidden cache refresh test, not packaged case, the fastest 3.82 seconds , and packaging case, the fastest 798 milliseconds , that is 0.8 seconds.

Optimization is significant. Objective to achieve.

blog.csdn.net/joyous/article/details/79905937
Q Group Discussion 236201801

Note: GIF in Dojo\1.13.0\dijit\icons\images is the icon for the button, and the extended icon can modify these PNG and GIF.