Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载

问题现象:

Dojo的JS文件分散,如果不打包压缩直接使用,尤其是页面上存在dijit/dojox控件(或者在HTML直接引入JS)的时候,加载的JS过多,会导致画面初期化时间较长。

解决方案:

Dojo提供了一个Build打包工具,将多个JS或者CSS文件,整合到一个独立的文件中,简化浏览器加载Dojo文件次数,用于优化页面加载时间。(HTTP协议的特性决定了多次请求取得多个小文件的效率远远低于一次请求一个大文件的效率)

Build步骤:

1、dojo build需要下载dojo的full source版本(目前最新是1.14.2版本):Dojo官网

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第1张图片

2、下载解压之后可以看到一个util文件夹,util/buildscripts文件夹包含打包所需要的所有文件。

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第2张图片

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第3张图片

在buildscripts/profiles文件夹下是系统自带的一些profile文件,用于打包标准的dojo.js和dijit.js等。

我们需要新建自己的XX.profile.js文件,指定需要合并的JS/CSS

首先以打包JS为例:

(1)新建一个mydojo.profile.js

文件中定义一个全局对象dependencies。包含layers/prefixes这2个必须的属性。

layers数组中可以包含多个layer。每个layer的【name】为生成的文件名

【dependencies】为我们希望打包的JS模块。Build系统会按照dojo.require等关键字,自动去递归寻找所有依赖的模块并将它们全部打包。因此我们不必列出所有需要打包的文件,只需列出一些根文件即可。

prefixes数组定义的是模块映射关系。前是模块前缀,如"dijit",后面是相对于util/路径的相对路径,如"../dijit"。

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第4张图片

(2)之后启动cmd,跳转到util/buildscripts目录,使用build.bat命令打包

输入:build.bat profile=mydojo action=release releaseName=dojobuild optimize=shrinksafe

参数profile指定mydojo.profile.js的文件;

action指定本次命令类型,3个选择:clean,release,help;

releaseName指定目录名称,默认为dojo;

optimize指定打包优化方式,一般使用shrinksafe即可。

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第5张图片

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第6张图片

(3)打包之后,会多出一个release目录,里面有个dojobuild文件夹

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第7张图片

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第8张图片

我们可以看到dojo文件夹下有一个dojo-pos.js文件,即为打包的JS文件(不可单独导入引用)

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第9张图片

(4)使用方法分为三种情况:

1》如果项目中还未存在Dojo包,则可以直接将Build之后的整个dojobuild文件夹拷贝到项目中(具体位置自行决定)

2》如果项目中已经存在其他版本的Dojo包,想要替换成该Build版本的包,则做法同上,之后可以删除原先的Dojo包(名称自定):如下,导入新的【dojobuild】包,删除原先的【dojo】包,也可将dojobuild重命名为【dojo】

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第10张图片

3》如果只是想在项目即存的Dojo包基础上更新。则只需将生成的dojo-pos.js文件,放置到项目dojo文件夹下(和dojo.js同层),同时,还需要将build之后的dojo/nls文件夹下对应语言的JS文件(如ja-jp),拷贝到项目的相同文件夹下。

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第11张图片

(5)修改项目引用dojo.js的位置

除了原先引用dojo.js不变,还必须把dojo-pos.js引用进来。

 

其次以打包CSS为例:

(1)首先需要在任意位置新建一个文件夹,如posDojoCss

文件夹中新建一个CSS文件,用于引入所有需要用到的css,如posDojoCss.css

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第12张图片

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第13张图片

(2)同样在util/buildscripts/profiles中新建一个posCss.profile.js文件,releaseDir指定了生成文件夹的名称

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第14张图片

(3)打开cmd进入buildscripts中,

输入:build.bat profile=profiles/posCss.profile.js

上述文件的格式和打包JS的格式不同,生成文件的位置会有所不同。(生成的posDojoCssBuild出现在了buildscripts中)

(当然也可以用上述格式打包JS,只是上述命令打包生成的文件不会包含xx.js.uncompressed.js文件。不利于开发调查。

所以还是根据各自项目需要使用不同的打包命令)

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第15张图片

(4)使用方式:只需将生成的posDojoCss文件夹拷贝到项目中,要和dojo/dojox/dijit这几个文件夹同层。

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第16张图片

(5)替换原先CSS的引用

Dojo Util Build 打包压缩 合并独立JS/CSS 优化加载_第17张图片

 

结语:

使用Dojo Build一方面能够对Dojo包中的JS文件进行压缩,另一方面,能够自定义打包的JS/CSS文件,将众多的JS合并成一个,减少请求数量,从而达到提速。

 

你可能感兴趣的:(dojo,build,打包,压缩,独立,独立,合并JS和CSS,优化加载,Dojo)