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

前端之家收集整理的这篇文章主要介绍了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.selector.lite","dojo.selector.acme","dojo.dom","dojo.on","dojo.html","dojo.dom-attr","dojo.dom-class","dojo.has","dojo.hash","dojo.json","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.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,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.

原文链接:https://www.f2er.com/dojo/290897.html

猜你在找的Dojo相关文章