注意,本文中的描述仅适用于基于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

首先保证已经安装了nodejsnpm

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

Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率的更多相关文章

  1. web开发的性能准则(减少页面加载时间方面)

    准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...

  2. Web前端性能优化总结——如何提高网页加载速度

    一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...

  3. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  4. 移动端web开发总结

    前一个星期实战完一个PC端的基于HTML+CSS的项目,这几天则接触了移动端的开发,同样也是在HTML+CSS的基础上完成.虽然第一次接触移动端的开发,但在开发过程中,我也是按照PC端的开发步骤来进行 ...

  5. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  6. 无线端web开发学习总结

    无线web开发之前要做一些准备工作:一.必需的reset样式库1.其中的重点是盒模型box-sizing:由原来pc端的content-box改为border-box. *, *:before, *: ...

  7. 移动端web开发技巧(转)

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  8. 手摸手带你学移动端WEB开发

    HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...

  9. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

随机推荐

  1. 腾讯云上Selenium用法示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:崔庆才 前言 在上一节我们学习了PhantomJS 的基本用法,归根结底它是一个没有界面的浏览器,而且运 ...

  2. 从零开始用 Flask 搭建一个网站(三)

    从零开始用 Flask 搭建一个网站(二) 介绍了有关于数据库的运用,接下来我们在完善一下数据在前端以及前端到后端之间的交互.本节涉及到前端,因此也会讲解一下 jinja2 模板.jQuery.aja ...

  3. Java中线程的yield(),sleep()以及wait()的区别

    从操作系统的角度讲,os会维护一个ready queue(就绪的线程队列).并且在某一时刻cpu只为ready queue中位于队列头部的线程服务. 但是当前正在被服务的线程可能觉得cpu的服务质量不 ...

  4. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  5. python os模块常用方法

    OS模块是Python标准库中的一个操作模块,主要用于处理Linux操作系统中的文件和目录 1.要使用OS必须先导入OS import os 2.os.getcwd()获取当前路径. print os ...

  6. Jax-ws 开发webService ,并使用spring注入service类

    由于使用myeclipse自动生成的Delegate,所以在使用service实现层的时候,默认创建的时候都是使用new的方法: 这样就导致每一次请求过来都得new一个新的:如果service有注入其 ...

  7. php7 redis扩展编译安装

    提示:php7版本不支持redis2点几的扩展 上正文: wget -c https://github.com/phpredis/phpredis/archive/php7.zip unzip php ...

  8. 基于Prism.Windows的UWP开发备忘

    以前做UWP开发都是使用MvvmLight,主要是简单易上手,同时也写了很多MvvmLight的开发系列文章: UWP开发必备以及常用知识点总结 UWP开发之Mvvmlight实践九:基于MVVM的项 ...

  9. HashMap负载因子

    下面是HashMap的一个构造函数,两个参数initialCapacity,loadFactor 这关系HashMap的迭代性能. /** * Constructs an empty <tt&g ...

  10. 消息队列NetMQ 原理分析3-命令产生/处理和回收线程

    消息队列NetMQ 原理分析3-命令产生/处理和回收线程 前言 介绍 目的 命令 命令结构 命令产生 命令处理 创建Socket(SocketBase) 创建连接 创建绑定 回收线程 释放Socket ...