dojo build 打包 独立 js 文件 优化加载 大幅缩短页面加载时间
blog.csdn.net/joyous/article/details/79905937
dojo 是一个非常强大的 js 开源前端库，设计前卫、低耦合，各模块(控件) js 文件独立，使用非常方便，能满足绝大部分企业 Web 应用的开发，但由于 js 文件分散，若不打包压缩直接使用，尤其是页面上存在 dijit 或者 dojox 控件的时候，加载众多的 js 文件会导致页面展开时间较长。
而 dojo 也提供了一个 build 打包工具可以解决发行时页面加载优化的问题，dojo build 可以将页面需要的模块都整合到一个独立文件中，那么浏览器加载 dojo 页面的过程会大幅简化，也将大幅缩短加载时间！
dojo build 需要下载 dojo 的 full source 版本，这个版本的 dojo 也是调试版本，js 代码没有经过压缩，完全可读，而也只有这个版本的 dojo 才带有 dojo build，但使用 dojo build 还需要另一个软件环境支持，那就是 java，这里就不另行介绍了，我的 blog 有其它文章介绍安装和配置 java，请自行翻阅。
dojo 下载 https://dojotoolkit.org/download/
下载之后解压到硬盘上，可以看到以下几个目录，dojo build 就在 util 中。
下面是 dojo build 的 profile 配置，如果有需要导入新的模块，可以在配置文件中增加，也可以把不需要的模块删除。
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",
"dojo.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.storage",
"dojox.storage.GearsStorageProvider",
"dojox.storage.WhatWGStorageProvider",
"dojox.storage.FlashStorageProvider",
"dojox.flash",
"dijit.dijit",
"dijit.form",
"dijit.form.CheckBox",
"dijit.form.Button",
"dijit.form.TextBox",
"dijit.form.RadioButton",
"dijit.form.NumberTextBox",
"dijit.form.ComboButton",
"dijit.layout.BorderContainer",
"dijit.layout.ContentPane",
"dijit.layout.AccordionContainer",
"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" ]
]
};将上面的配置内容复制后，起一个名字 single.profile.js 存到 util\buildscripts\profiles 目录中。
进入控制台，并跳转到 util\buildscripts 目录：
输入 build 命令：build.bat profile=single action=release releaseName=1.13.0-mini optimize=shrinksafe
参数 profile 指定了 util\buildscripts\profiles 里面的 single.profile.js
action 和 releaseName 指定了发布目录和输出目录
optimize 指定了打包优化的方式，删除换行符。
开始自动打包：
几十秒后，打包完成，若配置有依从关系的遗漏并不会影响使用，dojo 会单独再去调用那个遗漏的 js 文件。
回到资源管理器中，可以看到多出一个目录 release，新打包的 dojo 就在里面。
1.13.0-mini 即批处理设置的输出参数指定的输出目录
调用的话，需要同时引用标准的 dojo.js 和生成的 dojo-mini.js。
<script type="text/javascript" charset="utf-8" src="scripts/dojo/1.13.0-mini/dojo/dojo.js" djConfig="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>
将目录 1.30.0-mini 复制到Web工程下，并在 html 页面中引用后刷新页面，我们来比较一下用原始引用方式和打包后引用的加载时间：
这是原始的，仅引用 dojo.js 的加载截图：
这是优化加载，同时引用了 dojo.js 和 dojo-mini.js 的情况：
同一个页面，经过多次禁缓存刷新测试，不打包情况下，最快 3.82 秒，而打包情况下，最快 798 毫秒，也就是 0.8 秒不到。
优化显著！目的达到！
blog.csdn.net/joyous/article/details/79905937
Q群讨论 236201801
备注信息：dojo\1.13.0\dijit\icons\images 中的 gif 是作为按钮的图标，扩展图标可以修改这些 png 和 gif.