注意，本文中的描述僅適用於基於Ionic進行PC端的Web開發，如果是手機端的開發，可以嘗試僅使用UglifyJS2進行壓縮，是否會有提高請自行驗證，至少文件小了載入速度會快。^_^

1. 問題

1.1. 問題上下文描述：

1. 基於Ionic進行PC端的Web應用開發；
2. 使用Tomcat作為最終服務發布容器。

1.2. 問題描述：

編譯後main.js的大小為4-6MByte。(集成第三方控制項前4M左右，集成後6M左右)，導致第一次載入時速度較慢。

2.解決方案

經過分析，main.js有很大的壓縮空間：

• 首先，其沒有進行代碼級別的研發，可以通過UglifyJS2進行代碼級別的壓縮；
• 其次，可以利用瀏覽器的特性，進行gzip壓縮。
  經驗證原本6MByte左右的文件，壓縮後成了500KByte左右，極大提高了載入效率。

3. 具體操作

3.1. 安裝並使用UglifyJS2進行代碼級別的壓縮：3.1.1. 安裝UglifyJS2

首先保證已經安裝了nodejs和npm

npm install uglify-js -g

3.1.2. 代碼級壓縮

uglifyjs main.js -o main.min.js

通過上面的壓縮命令，生成的main.min.js大約是原來的一半3MByte左右。

首先到gzip官網下載對應命令行的安裝包。

解壓後，可以在環境變數中進行配置，方便後續操作。

然後通過如下命令進行gzip壓縮：

gzip -9 -S gz main.min.js

壓縮後會生成一個名為main.min.jsgz的文件，好了可以看到這個文件只有500KByte左右，我這裡是577KByte。

壓縮後，就是使用了，基於Tomcat我們增加過濾器，對訪問main.js的請求都轉發給main.min.jsgz。

本部分基於Servlet3.0以上支持的註解方式增加：

package com.telchina.workmanage.common.filter;

/**
* Servlet Filter implementation class JSRequestFilter
*/
@WebFilter(filterName="JSRequestFilter",urlPatterns={"/build/main.js"})
public class JSRequestFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
if(request instanceof HttpServletRequest){
this.doFilter((HttpServletRequest)request, (HttpServletResponse)response, chain);
}
else{
chain.doFilter(request, response);
}
}
public void doFilter(HttpServletRequest request, HttpServletResponse response,
FilterChain chain) throws IOException, ServletException {
if(request.getRequestURI.endsWith("main.js")){
response.addHeader("Content-Encoding", "gzip");
request.getRequestDispatcher("/build/main.min.jsgz")
.forward(request, response);
}
else{
chain.doFilter(request, response);
}
}
@Override
public void destroy {
}
}

OK了，感受一把修改後飛一般的速度吧。O(∩_∩)O~~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！