1、說明在使用extjs 的時候,運行起來比較卡,特別是運行資料和js過多的時候,就會出現卡死的情況,或者等待時間比較長。
在解決這個有很多最佳化方法,今天來說其中一種,那就是在Ant指令碼打包的時候,把js中空格、注釋去掉、以及合并,合并今天不說了,還未實現這個,在研究中
2、首先,需要準備二個 .jar 檔案,分別是 YUIAnt.jar 和 yuicompressor-2.4.x.jar 。
3、倆個檔案的附件
4、build.xml檔案如下
複製代碼 代碼如下:
<!-- JS壓縮過程中的臨時目錄 -->
<property name="jsDir" value="${basedir}/release/web/js" />
<!-- CSS壓縮過程中的臨時目錄 -->
<property name="cssDir" value="${basedir}/release/web/css" />
<!-- ext3 css壓縮過程中的臨時目錄 -->
<property name="cssExtDir" value="${basedir}/release/web/ext3" />
<!-- ext3 js壓縮過程中的臨時目錄 -->
<property name="extUxJsDir" value="${basedir}/release/web/ext3/ux" />
<!-- JS源檔案 -->
<property name="jsSourceDir" value="${webapp}/js" />
<!-- CSS源檔案 -->
<property name="cssSourceDir" value="${webapp}/css" />
<!-- Ext CSS源檔案 -->
<property name="cssExtSourceDir" value="${webapp}/ext3" />
<!-- Ext JS源檔案 -->
<property name="extUxJsSourceDir" value="${webapp}/ext3/ux" />
<!-- yui 依賴包 -->
<path id="yuiClasspath">
<fileset dir="${basedir}">
<include name="metadata/tools/yui/yuicompressor-2.4.2.jar" />
<include name="metadata/tools/yui/YUIAnt-zh_CN.jar" />
</fileset>
</path>
複製代碼 代碼如下:
<!-- 開始壓縮JS -->
<target name="copy-web-depress-js" depends="init">
<delete dir="${basedir}/release/web" />
<copy todir="${basedir}/release/web">
<fileset dir="${webapp}"/>
</copy>
<taskdef name="uxJsCompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<path refid="yuiClasspath" />
</classpath>
</taskdef>
<uxJsCompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${extUxJsDir}">
<fileset dir="${extUxJsSourceDir}">
<include name="**/*.js" />
</fileset>
</uxJsCompress>
<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<path refid="yuiClasspath" />
</classpath>
</taskdef>
<yuicompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${jsDir}">
<fileset dir="${jsSourceDir}">
<include name="**/*.js" />
</fileset>
</yuicompress>
<taskdef name="cssYuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<path refid="yuiClasspath" />
</classpath>
</taskdef>
<cssYuicompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${cssDir}">
<fileset dir="${cssSourceDir}">
<include name="**/*.css" />
</fileset>
</cssYuicompress>
<taskdef name="cssExtYuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<path refid="yuiClasspath" />
</classpath>
</taskdef>
<cssExtYuicompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${cssExtDir}">
<fileset dir="${cssExtSourceDir}">
<include name="**/*.css" />
</fileset>
</cssExtYuicompress>
</target>
<!-- 結束壓縮JS -->
5、在這裡說一點,在使用js壓縮的時候YUIAnt.jar 是不支援utf-8字元集的。即
複製代碼 代碼如下:
encoding="utf-8
7、個人感受,在弄了很小半天,吧這個問題搞定了,自以為可以提高點js載入速度了,結果還是有點小慢,沒有jquery那麼的快,估計要用gzjs壓縮才會變快點,現在我分析是的在IE下運行速度比較慢點,在firefox下比較快,看來還是每個模組載入的js有點多。
最佳化速度對比: