Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率

2022-09-27 17:18:18

注意，本文中的描述仅适用于基于Ionic进行PC端的Web开发，如果是手机端的开发，可以尝试仅使用UglifyJS2进行压缩，是否会有提高请自行验证，至少文件小了加载速度会快。^_

1. 问题

1.1. 问题上下文描述：

基于Ionic进行PC端的Web应用开发；
使用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左右。

3.2. 使用gzip进一步压缩

首先到gzip官网下载对应命令行的安装包。

解压后，可以在环境变量中进行配置，方便后续操作。

然后通过如下命令进行gzip压缩：

gzip -9 -S gz main.min.js

压缩后会生成一个名为main.min.jsgz的文件，好了可以看到这个文件只有500KByte左右，我这里是577KByte。

压缩后，就是使用了，基于Tomcat我们增加过滤器，对访问main.js的请求都转发给main.min.jsgz。

3.3. 增加过滤器进行请求转发

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

package com.telchina.workmanage.common.filter;

import java.io.IOException;

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.annotation.WebFilter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * 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~~

码农公寓