Extjs可以說是目前最優(yōu)秀的js開發(fā)庫了。除了那個蹩腳的GPLV3授權。
但是使用中遇到的第一個問題就是,Extjs那龐大的個頭。想辦法壓縮ExtJS的大小成了首先要解決的問題。
談談我的解決方法,歡迎拍磚。突然發(fā)現前面那個廣告貼被鎖了
1、壓縮混淆
除了ExtJS的大個子以外,引用的很多其他的js庫,項目中自己的js文件等等。采用OPOA組件式開發(fā)最后一定會增大js文件的總量。所以項目后期要對這些文件進行壓縮合并?,F在流行的js壓縮工具有很多,如packer,jsMin,Esc,JSA,yui-compressor等等。經過實際使用我選的是yui-compressor.
yui-compressor項目地址:http://developer.yahoo.com/yui/compressor/
下載后得到一個java開發(fā)的jar包。使用方法基于命令行:
java -jar yuicompressor-x.y.z.jar [options] [input file]
開發(fā)中的js文件不可能一個個的手動壓縮,這里用到了ANT。在項目構建中可以替你完成以上任務。
- <property name="yuicompressor" value="${tools}/yuicompressor-2.3.6.jar" />
- <apply executable="java" parallel="false" verbose="true" dest="${dist}/WebRoot">
- <fileset dir="${dist}/WebRoot">
- <include name="modules/*.js" />
- <include name="js/*.js" />
- </fileset>
- <arg line="-jar" />
- <arg path="${yuicompressor}" />
- <arg line="--type js --charset UTF-8 -o" />
- <targetfile />
- <mapper type="glob" from="*.js" to="*-m.js" />
- </apply>
- <concat destfile="${dist}/WebRoot/js/base.js" encoding="UTF-8" >
- <fileset dir="${dist}/WebRoot/js">
- <include name="*-m.js" />
- </fileset>
- </concat>
- <concat destfile="${dist}/WebRoot/modules/modules.js" encoding="UTF-8" >
- <fileset dir="${dist}/WebRoot/modules">
- <include name="*-m.js" />
- </fileset>
- </concat>
- <delete>
- <fileset dir="${dist}/WebRoot">
- <include name="js/*.js"/>
- <include name="modules/*.js"/>
- <exclude name="modules/modules.js" />
- <exclude name="js/base.js" />
- </fileset>
- </delete>
<property name="yuicompressor" value="${tools}/yuicompressor-2.3.6.jar" /><apply executable="java" parallel="false" verbose="true" dest="${dist}/WebRoot"><fileset dir="${dist}/WebRoot"><include name="modules/*.js" /><include name="js/*.js" /></fileset><arg line="-jar" /><arg path="${yuicompressor}" /><arg line="--type js --charset UTF-8 -o" /><targetfile /><mapper type="glob" from="*.js" to="*-m.js" /></apply><concat destfile="${dist}/WebRoot/js/base.js" encoding="UTF-8" ><fileset dir="${dist}/WebRoot/js"><include name="*-m.js" /></fileset></concat><concat destfile="${dist}/WebRoot/modules/modules.js" encoding="UTF-8" ><fileset dir="${dist}/WebRoot/modules"><include name="*-m.js" /></fileset></concat><delete><fileset dir="${dist}/WebRoot"><include name="js/*.js"/><include name="modules/*.js"/><exclude name="modules/modules.js" /><exclude name="js/base.js" /></fileset></delete>
2、gzip壓縮。
壇子里討論的gzip壓縮有2種,
一是有的容器(服務器)提供的功能,但這個局限于特定容器。比如apache+tomcat或者resin-pro版。
二是部署前手動gzip壓縮,配合servlet過濾器使用,這個能實現gzip功能,但是降低了靈活性。
我自己用的是自己的實現,采用gzip servlet filter實現。下面是我的代碼參考網上內容.
-
- package sh.blog.util.web.filter;
-
- import java.io.IOException;
-
- import java.util.zip.GZIPOutputStream;
-
- import javax.servlet.ServletOutputStream;
-
- public class CompressedStream extends ServletOutputStream {
-
- private ServletOutputStream out;
- private GZIPOutputStream gzip;
-
-
-
-
-
-
- public CompressedStream(ServletOutputStream out) throws IOException {
- this.out = out;
- reset();
- }
-
-
- public void close() throws IOException {
- gzip.close();
- }
-
-
- public void flush() throws IOException {
- gzip.flush();
- }
-
-
- public void write(byte[] b) throws IOException {
- write(b, 0, b.length);
- }
-
-
- public void write(byte[] b, int off, int len) throws IOException {
- gzip.write(b, off, len);
- }
-
-
- public void write(int b) throws IOException {
- gzip.write(b);
- }
-
-
-
-
-
-
- public void reset() throws IOException {
- gzip = new GZIPOutputStream(out);
- }
- }
package sh.blog.util.web.filter;import java.io.IOException;import java.util.zip.GZIPOutputStream;import javax.servlet.ServletOutputStream;public class CompressedStream extends ServletOutputStream {private ServletOutputStream out;private GZIPOutputStream gzip;/*** 指定壓縮緩沖流* @param 輸出流到壓縮* @throws IOException if an error occurs with the {@link GZIPOutputStream}.*/public CompressedStream(ServletOutputStream out) throws IOException {this.out = out;reset();}/** @see ServletOutputStream * */public void close() throws IOException {gzip.close();}/** @see ServletOutputStream * */public void flush() throws IOException {gzip.flush();}/** @see ServletOutputStream * */public void write(byte[] b) throws IOException {write(b, 0, b.length);}/** @see ServletOutputStream * */public void write(byte[] b, int off, int len) throws IOException {gzip.write(b, off, len);}/** @see ServletOutputStream * */public void write(int b) throws IOException {gzip.write(b);}/*** Resets the stream.** @throws IOException if an I/O error occurs.*/public void reset() throws IOException {gzip = new GZIPOutputStream(out);}}
package sh.blog.util.web.filter;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpServletResponseWrapper;public class CompressionResponse extends HttpServletResponseWrapper {protected HttpServletResponse response;private ServletOutputStream out;private CompressedStream compressedOut;private PrintWriter writer;protected int contentLength;/*** 創(chuàng)建一個新的被壓縮響應給HTTP** @param response the HTTP response to wrap.* @throws IOException if an I/O error occurs.*/public CompressionResponse(HttpServletResponse response) throws IOException {super(response);this.response = response;compressedOut = new CompressedStream(response.getOutputStream());}/*** Ignore attempts to set the content length since the actual content length* will be determined by the GZIP compression.** @param len the content length*/public void setContentLength(int len) {contentLength = len;}/** @see HttpServletResponse * */public ServletOutputStream getOutputStream() throws IOException {if (null == out) {if (null != writer) {throw new IllegalStateException("getWriter() has already been called on this response.");}out = compressedOut;}return out;}/** @see HttpServletResponse * */public PrintWriter getWriter() throws IOException {if (null == writer) {if (null != out) {throw new IllegalStateException("getOutputStream() has already been called on this response.");}writer = new PrintWriter(compressedOut);}return writer;}/** @see HttpServletResponse * */public void flushBuffer() {try {if (writer != null) {writer.flush();} else if (out != null) {out.flush();}} catch (IOException e) {e.printStackTrace();}}/** @see HttpServletResponse * */public void reset() {super.reset();try {compressedOut.reset();} catch (IOException e) {throw new RuntimeException(e);}}/** @see HttpServletResponse * */public void resetBuffer() {super.resetBuffer();try {compressedOut.reset();} catch (IOException e) {throw new RuntimeException(e);}}/*** Finishes writing the compressed data to the output stream. Note: this* closes the underlying output stream.** @throws IOException if an I/O error occurs.*/public void close() throws IOException {compressedOut.close();}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- package sh.blog.util.web.filter;
-
- import java.io.IOException;
-
- import java.util.Enumeration;
-
- import javax.servlet.Filter;
- import javax.servlet.FilterChain;
- import javax.servlet.FilterConfig;
- import javax.servlet.ServletException;
- import javax.servlet.ServletRequest;
- import javax.servlet.ServletResponse;
-
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
-
- import org.apache.commons.logging.Log;
- import org.apache.commons.logging.LogFactory;
-
-
- public class CompressionFilter implements Filter {
-
- protected Log log = LogFactory.getFactory().getInstance(this.getClass().getName());
-
- @SuppressWarnings("unchecked")
- public void doFilter(ServletRequest request, ServletResponse response,
- FilterChain chain) throws IOException, ServletException {
-
- boolean compress = false;
- if (request instanceof HttpServletRequest){
- HttpServletRequest httpRequest = (HttpServletRequest) request;
- Enumeration headers = httpRequest.getHeaders("Accept-Encoding");
- while (headers.hasMoreElements()){
- String value = (String) headers.nextElement();
- if (value.indexOf("gzip") != -1){
- compress = true;
- }
- }
- }
-
- if (compress){
- HttpServletResponse httpResponse = (HttpServletResponse) response;
- httpResponse.addHeader("Content-Encoding", "gzip");
- CompressionResponse compressionResponse= new CompressionResponse(httpResponse);
- chain.doFilter(request, compressionResponse);
- compressionResponse.close();
- }
- else{
- chain.doFilter(request, response);
- }
- }
-
-
- public void init(FilterConfig config) throws ServletException {
-
- }
-
- public void destroy(){
-
- }
- }
/*** 如果瀏覽器支持解壓縮,則壓縮該代碼* @throws IOException ServletException if an error occurs with the {@link GZIPOutputStream}.* 如果需要開啟該過濾器,在web.xml中加入此代碼<filter><filter-name>gzip</filter-name><filter-class>com.strongit.finance.gzip</filter-class></filter><filter-mapping><filter-name>gzip</filter-name><url-pattern>*.jsp</url-pattern></filter-mapping>*/package sh.blog.util.web.filter;import java.io.IOException;import java.util.Enumeration;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;public class CompressionFilter implements Filter {protected Log log = LogFactory.getFactory().getInstance(this.getClass().getName());@SuppressWarnings("unchecked")public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {boolean compress = false;if (request instanceof HttpServletRequest){HttpServletRequest httpRequest = (HttpServletRequest) request;Enumeration headers = httpRequest.getHeaders("Accept-Encoding");while (headers.hasMoreElements()){String value = (String) headers.nextElement();if (value.indexOf("gzip") != -1){compress = true;}}}if (compress){//如果瀏覽器支持則壓縮HttpServletResponse httpResponse = (HttpServletResponse) response;httpResponse.addHeader("Content-Encoding", "gzip");CompressionResponse compressionResponse= new CompressionResponse(httpResponse);chain.doFilter(request, compressionResponse);compressionResponse.close();}else{//如果瀏覽器不支持則不壓縮chain.doFilter(request, response);}}public void init(FilterConfig config) throws ServletException {}public void destroy(){}}
實際使用的效果以
http://demo.slivercrm.cn:8084為例
登陸窗口:
首頁: