Ionic improves the first loading efficiency by script compression in PC-side Web development

Keywords: Tomcat npm Web Development Mobile

Note that the description in this article is only applicable to PC-side Web development based on Ionic. If it is mobile-side development, you can try to use Uglify JS2 only for compression. Whether there will be any improvement, please verify by yourself, at least the file will load faster when it is smaller. C

1. Questions

1.1. The following description of the problem:

Developing Web application on PC based on Ionic;
Use Tomcat as the final service publishing container.

1.2. Problem description:

The compiled main.js is 4-6 MByte in size. (About 4M before and 6M after the integration of third-party controls), which results in slower loading speed at the first time.

2. Solutions

After analysis, main.js has a lot of compression space:

Firstly, it does not carry out code level research and development, and can compress code level through Uglify JS2.
Secondly, gzip compression can be implemented by using the characteristics of browsers.
The original 6 MByte file has been compressed to 500 KByte, which greatly improves the loading efficiency.

3. Specific operation

3.1. Install and use Uglify JS2 for code-level compression:

Installation of Uglify JS2

First, make sure that nodejs and npm are installed

npm install uglify-js -g

3.1.2. Code-level compression

uglifyjs main.js -o main.min.js

Through the above compression command, the main.min.js generated is about half of the original 3MByte.

3.2. Further compression using gzip

First to gzip official website Download the installation package for the corresponding command line.
After decompression, it can be configured in environment variables to facilitate subsequent operations.
Then gzip compression is performed by following commands:

gzip -9 -S gz main.min.js

After compression, a file named main.min.jsgz will be generated. Well, you can see that this file is only about 500 KByte. Here is 577 KByte.

After compression, it is used. Based on Tomcat, we add filters, and all requests for access to main.js are forwarded to main.min.jsgz.

3.3. Adding filters for request forwarding

This section adds annotations based on Servlet 3.0 or more.

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() {
    }
}

The article is reproduced in: http://www.cnblogs.com/gavin-cn

Posted by Shygirl on Sat, 08 Jun 2019 15:21:35 -0700

Programmer Group