Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率
来源:互联网 发布:淘宝商户注册风险 编辑:程序博客网 时间:2024/05/17 00:07
注意,本文中的描述仅适用于基于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() { }}
文章转载于:http://www.cnblogs.com/gavin-cn
阅读全文
0 0
- Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率
- 通过配置ant提高EJB开发效率
- 通过压缩Web文件提高网站吞吐量
- 提高JBuilder开发WEB层的效率
- 提高web开发效率的在线工具
- CoffeeScript和Sass提高Web开发效率
- 提高tableview加载效率
- itoo-快捷部署脚本--提高部署开发效率
- 通过Krumo调试Magento,提高PHP5程序开发效率
- pc端web前端开发
- [ASP开发]如何提高WEB程序的效率
- 提高程序执行效率,Web开发技巧30条
- 使用JRebel实现Web项目热部署, 提高开发效率
- java 的web开发如何提高交付效率? 吐槽
- 9个Web工具提高Android开发效率
- 9个Web工具提高Android开发效率
- 提高Android开发效率的9个Web工具
- 快速提高Android开发效率的Web工具
- 阿里云ubuntu nginx无法访问
- ROS-indigo_stage-simulator
- nginx upload在java中的应用
- leetCodeReorderList
- ElasticSearch 常用的查询过滤语句
- Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率
- 1-6:css3新增的属性
- linux下tar命令详解
- nginx配置server name
- 酒客项目日志20170731
- 2017世界机器人论坛会议日程预告
- 字典树的序列化和反序列化
- Git常用命令总结
- java 字节流和字符流的区别