Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率
注意,本文中的描述仅适用于基于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~~
Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率的更多相关文章
- web开发的性能准则(减少页面加载时间方面)
准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...
- Web前端性能优化总结——如何提高网页加载速度
一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- 移动端web开发总结
前一个星期实战完一个PC端的基于HTML+CSS的项目,这几天则接触了移动端的开发,同样也是在HTML+CSS的基础上完成.虽然第一次接触移动端的开发,但在开发过程中,我也是按照PC端的开发步骤来进行 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 无线端web开发学习总结
无线web开发之前要做一些准备工作:一.必需的reset样式库1.其中的重点是盒模型box-sizing:由原来pc端的content-box改为border-box. *, *:before, *: ...
- 移动端web开发技巧(转)
原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
- 手摸手带你学移动端WEB开发
HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
随机推荐
- angularjs实现首页轮播图
<!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <met ...
- nodejs 后台服务启动
最近一个项目微信小程序,需要写个小型的后端程序处理聊天通讯记录保存,主要是功能是组建群聊天室,所以用node写了个websocket服务... 但是终端连接到服务器,运行 node server.js ...
- Linux下deb包安装工具(附带安装搜狗输入法)
环境是在ubuntu14下的 #1.gdebi安装 使用deb安装工具gdebi,这个工具能解决所有依赖问题 sudo apt-get install gdebi #2.搜狗输入法 deb包下载地址: ...
- 【Tomcat源码学习】-1.概述
Tomcat是用java语言开发的一个Web服务器,最近花了差不多两周时间对Tomcat 9.0源码进行了一遍学习,由于知识储备有限,也只是理解了一个大概,下面就由我来给大家分享一下我对Tomcat的 ...
- 解决Javascript大数据列表引起的网页加载慢/卡死问题。
在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). 也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也 ...
- Java匿名内部类使用与示例
首先说为什么有匿名类 两个原因(产生的使命) 1.简化代码编写 某种情况下,类只需要扩展一个方法,没必要为了一个方法单独去写一个子类,然后然后调用子类,此时需要匿名类 2.在不同的包内的类内调用类的p ...
- JVM 方法调用之动态分派
1. 动态分派 一个体现是重写(override).下面的代码,运行结果很明显. public class App { public static void main(String[] args) { ...
- mysql主从复制-异步复制
一.创建复制账号: 在Master的数据库中建立一个备份帐户:每个Slave使用标准的MySQL用户名和密码连接master. 进行复制操作的用户会授予REPLICATION SL ...
- __builtin_popcount(n)
Gcc提供的内建函数__builtin_popcount(n),可以精确计算n表示成二进制时有多少个1.借助这个函数可以快速判断一个数是否是2的幂. bool isPowerOfTwo(int n) ...
- lightOJ 1258 Making Huge Palindromes(KMP)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1258 就是求逆串和原串的匹配长度 答案就是原串长度的2倍减去匹配长度即可 第一次我将原 ...