How to obfuscate ionic build to publish?

oguibueno · July 27, 2017, 11:10am

Hello mates,

I’m going to publish my first app to the google store and I need some advice or help to how I can obfuscate, shrink, minify, etc, my Ionic 3 application when I generate the build to publish.

I found some articles like this one:

and

So, I believe that have someone here that already did this before. Help me!

Best regards

AaronSterling · July 27, 2017, 12:21pm

Building with --prod automatically runs uglify.js.

mg1075_ionic · September 14, 2017, 8:28pm

What if there are css and js files under the assets folder?
The --prod build does not appear to have any impact on these files, even if they need to be optimized.

rapropos · September 14, 2017, 8:30pm

I think putting scripts under the assets folder is a mistake. All code that can be managed by webpack should be. It’s not just minification; there’s also dead code elimination.

mg1075_ionic · September 14, 2017, 8:36pm

Example:
the ionic conference app has a .json file (ok, not a “script” proper) under the “assets” folder.

github.com

ionic-team/ionic-conference-app/blob/master/src/assets/data/data.json

{

  "schedule": [{
    "date": "2047-05-17",
    "groups": [{
      "time": "8:00 am",
      "sessions": [{
        "name": "Breakfast",
        "timeStart": "8:00 am",
        "timeEnd": "9:00 am",
        "location": "Main hallway",
        "tracks": ["Food"],
        "id": "1"
      }]
    }, {
      "time": "9:15 am",
      "sessions": [{
        "name": "Introduction to Appcamp.io",
        "location": "Room 2203",
        "description": "Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",

This file has been truncated. show original

How would one go about optimizing this file - e.g., minification - in ionic 3?

rapropos · September 14, 2017, 8:39pm

I don’t see any point in trying to do that. If you change the property names, the data will no longer be usable in its intended form. Compressing it would be theoretically possible, but I don’t think it would be relevant as app binaries are zipped anyway.

mg1075_ionic · September 14, 2017, 8:44pm

No point in minification if the file is large and minifying can significantly reduce the file size?

Sujan12 · September 14, 2017, 8:47pm

Then do it manually or change to configuration so that it also minifies that one file.

rapropos · September 14, 2017, 8:49pm

Techniques used in JavaScript minification don’t apply for JSON assets. Think about it from an information theory standpoint: every property name and value in a JSON file conveys as much information as that name or value’s string representation. There is no way you can shrink a JSON file (except for whitespace compression) while preserving the requirement that JSON.parse() will return a functionally identical object as it would on the original version.

mg1075_ionic · September 14, 2017, 8:58pm

@Sujan12 - Can you please elaborate on where to get started with “changes to configuration” for a task like this?

Sujan12 · September 14, 2017, 9:41pm

No idea. It is a not very good idea with minimal payoff as @rapropos mentioned.
Probably in ionic app-scripts somehow.

stemsoftware · July 11, 2018, 2:03pm

So I’m here with the same question. By reading what you guys have responded --prod runs uglify and minify automatically, but what about obfuscating? Is it necessary? I found an npm package for ionic for what I need, but I want to make sure I even need it. https://www.npmjs.com/package/ionic-voricles-obfuscate

Thanks in advance.

virtualbankingapp · May 10, 2019, 11:42am

Hi All,

Kindly help if any one of you faced the same problem

I am using below obfuscation plugin in my IONIC app. I am able to successfully installed and now able to run app.
Only big problem is app has become too much slow after installation of plugin. Kindly suggest what i am doing wrong or any other steps which i have to follow to make our app user friendly, response and avoid delays.

My MAC and Project folder configuration is as below
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2

ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 2.1.4

Cordova Platforms  : android 7.0.0

Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.2 

Node       : v6.11.1

npm        : 3.10.10 

OS         : macOS

Xcode      : Xcode 10.2.1 Build version 10E1001