dojo build 打包 独立 js 文件 优化加载 大幅缩短页面加载时间

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.DialogUnderlay",
        "dijit.form._FormMixin",
        "dijit.nls.common",
        "dijit.nls.zh.common",
        
        "dijit.dijit",
        "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",
        
        "dojox.grid.LazyTreeGrid",
        "dijit.tree.ForestStoreModel",
        
        "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" ],
    /* 1.13 和 1.14.1 的 themes 路径略有差别, 具体看解压实际目录 */
    [ "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.

.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很不错的中文教程!文件太大分3个包! 目录如下: dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 DojoJSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面部分区域遮挡,DialogUnderlay Dojo学习笔记(五)-djConfig详解 dojo data 接口详解 dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四) dojo的拖拽示例以及疑问! 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动(Drag and Drop)效果
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值