JS - Reducing in size increases request size

I'm facing an issue with compressing my request - instead of reducing the size, it seems to be increasing it:

    const requestData = LZString.compress(JSON.stringify({ data: bigBase64StringHere }));

    await axios.post("api-endpoint", requestData, {
      headers: { "Content-Type": "text/plain" },
    });

When I compare the original string and the compressed one, I noticed that the compressed one is larger (original 400K vs compressed 500K). However, when calculating their sizes, the compressed one is actually half of the original size (original 800K vs compressed 330K).

Logging using console.log:

Uncompressed size:

https://i.sstatic.net/pqRAN.png

Compressed size:

https://i.sstatic.net/cDw6o.png

Logging using sizeof:

https://i.sstatic.net/5nn7l.png

(top uncompressed, bottom compressed)

Despite the compression seemingly working based on these comparisons, could it be that the Content-Length header is not accurately reflecting the actual request size?

This situation raises questions about the effectiveness of the compression method. Find more information at pieroxy.net/blog/pages/lz-string/demo.html.

Answer №1

Remember that sometimes a "compressed" file can end up being larger than the original. This is because additional data such as compression tables and metadata needs to be included, depending on the source and compression algorithm used. In your situation, it would be wise to compare the sizes of the resulting strings and opt for the smaller one, adjusting compression headers as needed.

If you find that the type of data you're compressing doesn't consistently yield good compression ratios, it might not be worth the effort. Consider experimenting with different compression algorithms to see if that makes a difference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delaying the return statement

Similar Inquiry: JavaScript asynchronous return value / assignment with jQuery I'm looking for a prototype of a chart with a constructor, and I came up with this implementation: function Chart(file) { var chart = undefined $.getJSON(file, f ...

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...

URL for image preview on Amazon S3

Is there a way to retrieve preview images from my Amazon S3 image storage instead of always fetching the full-sized 5MB images? If necessary, I would then be able to request the normal image. ...

No data being fetched through Ajax

I am facing an issue with retrieving PHP data in the form of an array. I have created an AJAX query to display data in two divs: one is a drop-down and the second is where all data will be shown. However, the problem is that when I attempt to do this, all ...

Issue with Trix text editor not triggering the change event

Lately, I've been facing some difficulties in getting the tirx-change event to trigger when there are changes in the content of a trix-editor. Despite using React JS for the view, I haven't been able to identify the problem. Below is the code sni ...

What is the process for reporting a security vulnerability in an npm package if you are the maintainer and publisher?

If I discover a security flaw in my published packages, how can I indicate which versions are vulnerable so that users running `npm audit` will be alerted? ...

Expansive menu that stretches the full height of the webpage

I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...

How to simulate keyboard events when a dropdown list is opened in an Angular application

Requirement- A situation arises where upon opening the dropdown menu, pressing the delete key on the keyboard should reset the index to -1. Steps to reproduce the issue: 1. Click on the dropdown and select an option from the menu. 2. Click on the dropdow ...

How can I trigger a mousedown event on mobile devices without using jQuery?

Can I implement a straightforward mousedown/mouseup event in an Angular-based mobile app? While utilizing ngTouch for swiping, I've noticed it lacks support for a 'while-pressed' event. I've found that ngMousedown is ineffective on to ...

Adjustable Cursor - modify size while in motion at high speeds

I've designed a unique custom cursor and I am looking to enhance its functionality by adjusting its scale dynamically during fast movements. Similar to the cursor on this website: Example.com Here is my custom cursor for reference: CodeSandBox What ...

The Next.js React app is constantly loading without any interruptions

Just diving into Next.js and attempting to transform a single HTML page into a Next.js website in order to integrate sanity. Managed to import all necessary assets, but stuck with the persistent preloader issue. After inspecting elements, noticed that a fi ...

Tips on customizing the appearance of JavaScript output?

I recently created a plugin for my website with JavaScript, and one of the lines of code I used was output.innerHTML = "Test"; Is it possible to apply CSS styles to this element, or is there an alternative method? ...

Filtering controls within a table are not displayed in VueJS

I have been attempting to implement date filtering in my data table based on a demo I followed. Despite meeting the filter requirements, no results are being displayed which is perplexing. Below are the imports and data from the file containing the table: ...

How can Vue JS 3 components exchange data between each other?

I am attempting to share data from a variable favorite_count in the Favorites component located in the file Favorites.vue. My goal is to pass this data to the App Component in the App.vue file but I have been unsuccessful so far. I want any changes made to ...

ASP.NET Core does not support jQuery.validate functionality

After successfully creating a functional jQuery.validation form using HTML, CSS, and JS with dependencies like jQuery and Validation, I encountered an issue when implementing the same code in a clean ASP.NET Core web project. It seems that my custom valida ...

Hiding or removing DOM elements with ng-bootstrap pagination

I am in the process of incorporating pagination into my project using ng-bootstrap pagination. In my HTML, I am combining an ngFor loop with the slice pipe to filter elements for display. <tr *ngFor="let bankAccount of bankingAccounts | slice: (p ...

Content not being displayed by Javascript

I'm having trouble displaying content using JavaScript DOM. Every time I try to run my code, the page comes up blank. Here is an example of my HTML file: <!DOCTYPE html> <html> <head> <title>Radiant HQ</titl ...

Establishing a bidirectional binding directive attribute within an AngularJS HTML structure

I'm new to AngularJs and I've encountered a problem that might be due to my lack of understanding about directives, controllers, and isolated scopes. I'm trying to figure out how to set a directive attribute to true/false in the html and kee ...

Using TypeScript generics to add constraints to function parameters within an object

My Goal: Imagine a configuration with types structured like this: type ExmapleConfig = { A: { Component: (props: { type: "a"; a: number; b: number }) => null }; B: { Component: (props: { type: "b"; a: string; c: number }) =& ...

The function "xml find" does not exist

After successfully running the following ajax call, I encounter an issue: $.ajax({ url: "services/orders/<%=OrderServices.Action.BULK_SUPPLIER_DISCOUNT%>", data: params, complete: function(xhr) { i ...