Optimizing VividCortex App Downloads Through Code Reduction

Posted by Alex Slotnick on Feb 11, 2017 6:38:00 PM

We've recently been able to achieve new optimization for VividCortex app downloads by making the code smaller, thanks to several successful minification and reduction projects by our frontend team. Of course, minification is an automated process, which we've been performing since day one. In addition, we recently performed an exhaustive revision of our own code, in order to find and remove any unneeded aspects.

We revised our dependencies in order to slice and dice them, to keep only the parts we strictly require. In some cases, we substituted existing dependencies entirely with smaller ones, which may have fewer features but fulfill every function we need them to.

Overall, we were able to shrink the size of our app's download file by about 600 kB. For many users, this might not appear to be a substantial amount, especially people in the United States, where connections tend to be fast and reliable, and where latency with our servers will naturally be good. For other users around the world — like members of our own engineering team, based in Uruguay — the smaller download size and the latency improvements can make a key difference. For any of these users, our minification improvements represent an important upgrade.

How We Optimized

We reduced the app download size thanks to four methods of minification.

  • Replacing the Math.js library with a smaller dependency called expr-eval.
    • We originally added the math.js library about a year ago, assuming that we'd use it more and more as time passed. That turned out not to be the case, and we realized we would be able to use a smaller library, expr-eval,  to satisfy the same functions. Math.js is a pretty heavy library, weighing in at about 400 kB. By replacing it, we achieved 40% reduction of the deps.js file size. In dev, this translated to a significant improvement in load time on slow networks, compared to the master.

      Before:
      mathjs before 1.jpg

      After:
      mathjs after.jpg

      Also, see these links to learn more about expr-eval:
  • Compressing Images.
    • This one is straightforward: by optimizing background images in the VividCortex app, we achieved 50% savings, according to Tinypng (we use the Grunt plugin).
      compressing images-1.jpg

  • Reducing our JSON Web Tokens library.
    • We were able to cut the size of the build by excluding some unused parts of the kjur/jsrsasign dependency. The size of the included file was 272K minified. The sum of all the files included now is 80K before minification.

  • Removing deprecated parts of code.
    • This is classic minification, of course. In this case, we removed a couple of visualizations from the distribution file, which weren't being used anywhere. We were able to achieve a reduction of 2 kB of JS and 1.9 kB of CSS (after minification).

At VividCortex, we appreciate how small changes and adjustments can accrue edge benefits and ultimately add up to major performance improvements. VividCortex enables users to find database issues and unoptimal queries, so they can improve their database performance; minification is the coding equivalent of this principle. Minification and reduction consist of simple and elegant adjustments — like deleting chunks of no-longer-useful code — that translate into real, noticeable benefits.

Ultimately, we hope these improvements make getting started with VividCortex more efficient for anybody who's interested in seeing what the app can do. Want to learn more about how we make VividCortex efficient? Let us know! And in the meantime, don't hesitate to jump in the app right away and get started with a free trial

Subscribe to Email Updates

Posts by Topic

see all