CN109189399A - 一种关于ionic打包压缩及快捷编译的方法 - Google Patents

Abstract

本发明公开了一种关于ionic打包压缩及快捷编译的方法，其特征在于，包含以下步骤：S1、在开发时，引入ionic3的“懒加载”特性；S2、在开发完成进行相关运行文件打包时，使用ionic提供的‑prod压缩ionic的资源文件；S3、对ionic的资源文件使用uglifyjs进行进一步压缩；S4、使用gzip对web端留在远程的数据包进行压缩；S5、配置过滤器，加载gzip压缩后的带有.gz后缀的文件，解决使用ionic和angular进行跨平台开发时打包过大、加载异常缓慢的问题，提升用户体验舒适度。

Description

一种关于ionic打包压缩及快捷编译的方法

技术领域

本发明涉及软件技术领域，特别是一种关于ionic打包压缩及快捷编译的方法。

背景技术

在前端盛行时代，敏捷开发，跨平台开发已经成了客户端及前端工程师的首选，而ionic则在这个背景下营运而生，ionic结合angularjs的特性，专门为客户端及前端开发打造的一个全能框架，当工程师把前端代码写完需要编译成运行时文件时，需要借助打包工具打包，而ionic官方给打包工具并会出现各种因为版本或者其他原因造成打包时消耗时间长或者打包出来的文件很大导致运行时加载非常缓慢，以至于应用在web端时需要加载很久。加载缓慢导致用户无论使用web版还是apk或者ipa都需要等待很久，开发人员在打包时也需要耗费大量时间进行打包等待。

发明内容

本发明的目的在于提供一种关于ionic打包压缩及快捷编译的方法，解决使用ionic和angular进行跨平台开发时打包过大、加载异常缓慢的问题，提升用户体验舒适度。

本发明的上述目的是通过以下技术方案得以实现的：

一种关于ionic打包压缩及快捷编译的方法，包含以下步骤：

S1、在开发时，引入ionic3的“懒加载”特性；

S2、在开发完成进行相关运行文件打包时，使用ionic提供的-prod压缩ionic的资源文件；

S3、对ionic的资源文件使用uglifyjs进行进一步压缩；

S4、使用gzip对web端留在远程的数据包进行压缩；

S5、配置过滤器，加载gzip压缩后的带有.gz后缀的文件。

进一步，所述步骤S1中，还包括在除根路径页面的所有页面添加“懒加载”标识。

进一步，所述步骤S5中，在后台tomact配置过滤器。

综上所述，本发明具有以下有益效果：

(1)、引入ionic3的“懒加载”特性，当运行文件启动时，ionic框架会自动加载非懒加载的html、js、css数据，当用户需要请求“懒加载”页面时，ionic框架在加载对应资源，此步骤从一定程度上减少了很多无用页面引用加载造成的资源臃肿、卡顿程度；

(2)、使用ionic提供的-prod压缩ionic的资源文件，将ionic提供的例子程序由5M压缩至1.2M左右，加载效率大致提升至70％；

(3)、对ionic的资源文件使用uglifyjs进行进一步压缩，在此步骤压缩后，在打包到原数据文件中，基本上app启动或者Web远程加载能在3秒左右完成，符合远程app的要求，大多数项目使用该方法可提升相当高的加载效率和启动效率；

(4)、使用gzip对web端留在远程的数据包进行压缩，然后在后台tomact配置过滤器，加载gzip压缩后的带有.gz后缀的文件，gzip的压缩指令例gzip-9-Sgz main.min.js，以ionic例子程序为例，main.js经过上面几步后还有600K左右，使用gzip压缩后能压缩至167k左右，整个项目包全部进行gzip压缩可以缩小至500k以内，这样使用加载远程webapp可以在4-5秒左右完成，符合远程的加载的一般需求，很大程度上提升用户的体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例的流程框图。

具体实施方式

在下面的详细描述中，提出了许多具体细节，以便于对本发明的全面理解。但是，对于本领域技术人员来说很明显的是，本发明可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本发明的示例来提供对本发明的更好地理解。

下面将结合附图，对本发明实施例的技术方案进行描述。

实施例：

如图1所示，一种关于ionic打包压缩及快捷编译的方法，包含以下步骤：

S1、在开发时，引入ionic3的“懒加载”特性，在除根路径页面的所有页面添加“懒加载”标识，添加该标识依旧，当运行文件启动时，ionic框架会自动加载非懒加载的html、js、css数据，当用户需要请求“懒加载”页面时，ionic框架在加载对应资源，此步骤从一定程度上减少了很多无用页面引用加载造成的资源臃肿、卡顿程度；

S2、在开发完成进行相关运行文件打包时，使用ionic提供的-prod压缩ionic的资源文件，此步骤将ionic提供的例子程序由5M压缩至1.2M左右，加载效率大致提升至70％；

S3、上述步骤完成之后，此时程序还有1.2M左右的资源文件，该1.2M左右的资源文件会造成android或者ios手机加载大概10s的时间以启动，Web端获取1.2M数据大概需要12s左右，用户基本上长时间等待在启动页面，虽然进行了压缩但是效果并不明显，此时对ionic的资源文件使用uglifyjs进行进一步压缩，例如uglifyjs main.js-o main.min.js，原main.js文件经过uglifyjs逻辑压缩后可由1M压缩至600K左右，在此步骤压缩后，在打包到原数据文件中，基本上app启动或者Web远程加载能在3秒左右完成，符合远程app的要求，大多数项目使用该方法可提升相当高的加载效率和启动效率；

S4、上一步压缩打包完成之后，Web端还有将近1M左右的数据包在远程，当用户网络不佳时，1M左右的数据包还是会加载大概11s左右，等待时间长，此时我们需要进行更进一步的优化，使用gzip对web端留在远程的数据包进行压缩；

S5、然后在后台tomact配置过滤器，加载gzip压缩后的带有.gz后缀的文件，gzip的压缩指令例gzip-9-Sgz main.min.js，以ionic例子程序为例，main.js经过上面几步后还有600K左右，使用gzip压缩后能压缩至167k左右，整个项目包全部进行gzip压缩可以缩小至500k以内，这样使用加载远程webapp可以在4-5秒左右完成，符合远程的加载的一般需求，很大程度上提升用户的体验。

以上实施例仅用以说明本发明的技术方案，而非对发明的保护范围进行限制。显然，所描述的实施例仅仅是本发明部分实施例，而不是全部实施例。基于这些实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明所要保护的范围。

尽管参照上述实施例对本发明进行了详细的说明，本领域普通技术人员依然可以在不冲突的情况下，不作出创造性劳动对本发明各实施例中的特征根据情况相互组合、增删或作其他调整，从而得到不同的、本质未脱离本发明的构思的其他技术方案，这些技术方案也同样属于本发明所要保护的范围。

Claims (3)

1.一种关于ionic打包压缩及快捷编译的方法，其特征在于，包含以下步骤：

S1、在开发时，引入ionic3的“懒加载”特性；

S2、在开发完成进行相关运行文件打包时，使用ionic提供的-prod压缩ionic的资源文件；

S3、对ionic的资源文件使用uglifyjs进行进一步压缩；

S4、使用gzip对web端留在远程的数据包进行压缩；

S5、配置过滤器，加载gzip压缩后的带有.gz后缀的文件。

2.根据权利要求1所述的一种关于ionic打包压缩及快捷编译的方法，其特征在于，所述步骤S1中，还包括在除根路径页面的所有页面添加“懒加载”标识。

3.根据权利要求1所述的一种关于ionic打包压缩及快捷编译的方法，其特征在于，所述步骤S5中，在后台tomact配置过滤器。