web開發中壓縮js/css檔案一種巧方法__c#

參考資料

http://www.javatang.com/archives/2008/04/13/0212267.html

        web應用中，前端的js、css比較大時，對應用訪問的效能影響很大，所以需要壓縮js/css檔案，將其中的注釋、分行符號等刪除，壓縮檔大小，產生一個只有一行代碼的壓縮後的檔案供程式引用（jquery等javascirpt庫就是壓縮後提供使用的），載入壓縮檔後會對效能提高很大。開發時，壓縮檔有很多方法，這裡建議採用使用yuicompressor-2.4.7.jar方法壓縮。由於壓縮後的檔案只有一行，將注釋都去掉，不易閱讀和修改，不方便開發人員修改，故往往保留一個壓縮前的源檔案，供開發人員修改維護，部署時將壓縮前源檔案使用壓縮公用程式壓縮成壓縮後檔案，程式中實際引用的是壓縮後檔案。這些工作往往需要手工完成，簡單的重複，降低開發、部署的效率。下面提供一種簡便方法解決這些問題。 方法原理、特點

       方法主要思路是在開發的工程源碼中，可以仍然引用未壓縮前的源檔案，正常的修改和添加註釋不變，源碼中不需要保留js/css源檔案的壓縮後檔案，而在部署時使用自動部署工具（Ant）自動將壓縮後的檔案打包到部署套件。這種方法的優點是1）開發人員原來的開發方式不受影響，不需要壓縮檔，壓縮檔延遲到部署期間通過自動部署工具實現；2）做到了開發、部署工作分離，部署時若需要臨時修改，可以在打包時，將壓縮前源檔案放置到部署套件中提供參考；3）開發源碼時的修改、注釋保證源碼可讀性，部署期動態壓縮，一舉兩得，提高了開發、部署效率。下面看具體執行個體。 執行個體說明

       一個項目中有2個js檔案index.js、view.js容量比較大、而且需要頻繁修改，如果引入源檔案對效能影響比較大。我們使用Ant部署指令碼對此指令碼進行處理。指令碼如下：

<project name="sjfwBuild" default="main" basedir="."> ... <property name="dist.tempdir" value="${app.home}/antbuild/tempdir" /><!--部署套件內為緩衝交換的臨時目錄--> <property name="dist.dir" value="${app.home}/antbuild/output" /><!--部署套件輸出路徑--> <property name="web.dir" value="${app.home}/web" /><!--工程源碼的web路徑--> <property name="webapp.war" value="sjfw.war" /><!--部署後目標包檔案--> ... <target name="war" depends="compileProject" description="打war包"> <echo>刪除已經存在的${dist.dir}/${webapp.war}</echo> <delete file="${dist.dir}/${webapp.war}"/> <echo message="備份js源檔案到臨時目錄"/> <copy todir="${dist.tempdir}/sjfw/src" file="${web.dir}/sjfw/index.js"/>               <copy todir="${dist.tempdir}/sjfw/src" file="${web.dir}/sjfw/view.js"/>                  <echo message="在臨時目錄壓縮js檔案" />   <java jar="${app.home}/antbuild/lib/yuicompressor-2.4.7.jar" fork="true" failonerror="false">      <arg line="--type js --charset ${charset} --nomunge ${dist.tempdir}/sjfw/src/index.js -o ${dist.tempdir}/sjfw/index.js" />      <arg line="--type js --charset ${charset} --nomunge ${dist.tempdir}/sjfw/src/view.js -o ${dist.tempdir}/sjfw/view.js" /> </java>   <echo>打war包 </echo> <war destfile="${dist.dir}/${webapp.war}" webxml="${web.dir}/WEB-INF/web.xml" compress="true" > <fileset dir="${web.dir}"> ... <exclude name="**/sjfw/index.js" /><!-- 先排除，後續用臨時目錄中產生壓縮檔替代打包--> <exclude name="**/sjfw/view.js" /> </fileset> <fileset dir="${dist.tempdir}"/><!-- 用臨時目錄中產生壓縮檔替代打包--> </war> <echo>打war包成功 </echo> </target>

註：上述指令碼中，注釋了主要的處理步驟和方法，主要思路是在打war包前，先將需要壓縮的js檔案備份轉存到緩衝交換臨時目錄，在臨時目錄中壓縮該檔案，打war包時，將壓縮後的檔案複製覆蓋到包檔案中，這樣做到的開發、部署源碼檔案都是相對獨立不受影響的。