What is the reason that the name property does not display anything in the Edge browser after compression?

Currently, I'm using a module that utilizes various functions like Not, And, type, and typeIs to construct a query string based on the content type it is searching for. However, there seems to be an issue with one of these functions, particularly the typeIs function in the production environment. Here is how it is implemented:

 public typeIs<TNewType>(newTypeAssertion: new (...args: any[]) => TNewType) {
        this.stringValue = `TypeIs:${newTypeAssertion.name}` // This line is causing the problem
        this.segmentType = 'typeIs'
        return this.finialize<TNewType>()
 }

The problem arises when the code is minified, as all function names are compressed by default. To address this issue, I configured the minimizer to retain function names. Here is the configuration:

minimizer: [
    new TerserPlugin({
      cache: true,
      parallel: true,
      terserOptions: {
        keep_fnames: true
      }
    })
]

While this solution worked well in Chrome, it did not have the same effect on Edge. The highlighted word "Typeis:" in the screenshot below illustrates the part of the query string that is incorrect. It should have been Typeis:User for proper functionality.

In order to resolve this discrepancy, I adjusted my minimizer settings as shown below:

minimizer: [
    new TerserPlugin({
      cache: true,
      parallel: true,
      terserOptions: {
        keep_fnames: true,
        compress: false // Enabling this setting is essential for compatibility with Edge.
      }
    })
  ]

The updated configuration now displays correctly on Edge without any compression artifacts. While I aim to reduce my bundle size through code compression, I have experimented with different compression options without success in isolating the issue. My main question remains: why does the name property output differently in Edge compared to Chrome when compressed?

Answer №1

After reading a comment by user kzc on GitHub, I was able to resolve a problem I was having. The comment referred to an issue related to 6 compression options:

  • collapse_vars
  • inline=3
  • join_vars
  • loops
  • reduce_vars
  • sequences (depending on the code)
  • unused

Upon investigating further, I discovered that the issue stemmed from the reduce_vars option. By modifying my minimizer configuration accordingly, I was able to address the issue successfully.

This is how my minimizer now looks after making the necessary adjustments:

minimizer: [
    new TerserPlugin({
      cache: true,
      parallel: true,
      terserOptions: {
        mangle: true,
        compress: {
          reduce_vars: false
        },
        keep_fnames: true
      }
    })
]

By referring to the documentation for Terser's compression options, I learned that reduce_vars improves optimization on variables assigned with constant values. Setting it to false in my configuration resolved the issue at hand, which was caused by reduced variables losing their module references during compression.

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

Error: JSONP unexpectedly encountered token '<' causing a SyntaxError

Issue: Error: Uncaught SyntaxError: Unexpected token < My Attempt Method Used: Jsonp Result: received XML Response 200. Due to Cross Domain Request, data type jsonp was utilized Code snippet: $.ajax({ url: "some url", headers: { ...

ng-class not updating using a combination of object and string

I am just starting to learn angular js and I recently came across the ng-class directive. Below is an example of how I have used it: ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed), 'bold-row-Class' : ...

Need to know how to show a DIV for a specific time frame using Javascript?

One of the features I am looking to implement in my Django application is a display that notifies the user when one of their posts is about to start. The idea is to show a DIV element with the message: <div>“Will start soon”</div>, 15 minut ...

Tips for pulling out specific keys from a typed object using an index signature

TL;DR Query: How do I create a type converter in TypeScript that extracts the defined keys from objects typed with index signatures? I am looking to develop a type "converter" in TypeScript that takes a type A as input and outputs a new type B with keys ...

The process of finding an element in an array using Typescript type guards necessitates first

After creating a type guard to verify if an object is of a specific type, I encountered a type error when trying to use array find with the type guard and a second condition. Strangely, the error disappears when I use array find with the type guard alone f ...

The accordion is experiencing functionality issues

I created a customized Accordion based on a code snippet I found online to incorporate into my project, but unfortunately, it's not functioning as expected. Currently, it is displaying the address of the high school and failing to hide it when the pag ...

Tips for successfully passing arguments in Angular applications

I've encountered an issue while working with mat-autocomplete. My function is not functioning properly when I select an item from the drop-down list. It seems like I need to pass the add() function in my select, but I'm receiving an error stating ...

Customize the size of innerWidth and innerHeight in your THREEjs project

Is there a way to customize the size of the window where this function launches instead of it automatically calculating the height and width? I've attempted to modify this section of the code, but haven't had any success so far: renderer.setSiz ...

Tips for preserving scroll location on Angular components (not the window) when navigating

My current layout setup is like this: https://i.sstatic.net/hOTbe.png In essence <navbar/> <router-outlet/> The issue I'm facing is that the router-outlet has overflow: scroll, making it scrollable (just the outlet section, not the ent ...

Navigating between components in angular2 modules: A tutorial

Currently, I am utilizing angular2 Final version for my development tasks. Within my project, I have established 3 distinct modules: AppModule ProjectModule DesignerModule In the past, I solely had AppModule which integrated the following RoutingModule ...

How to create a TypeScript generic function that takes a key of an object as a type argument and returns the corresponding value of that key in the object

My system includes various object types: type Slave = { myKey:string } type AnotherSlave = { anotherKey:string } In addition, there is a master type that contains some keys, with the object types mentioned above as the values for those keys: type Mas ...

Is there a method to compress all of my JS/CSS files before displaying them in the browser without doing so while editing them in the IDE?

I have a JavaScript file with numerous comments and unnecessary spaces, making it larger and slowing down the website. I am seeking a solution to minify the file when starting the server, while still being able to edit the original file in my IDE. Essen ...

State of Obtaining Collapsible Panel

Any suggestions on how to check the state of a panel with collapsible panel extender? I'm interested in determining on the client side if it's expanded or collapsed. Looking for some insights, appreciate any help! ...

Utilize TypeScript generics in Vue mixins by incorporating them into class components

After transitioning my Vue project to TypeScript, I encountered a situation that requires some management. To handle paginated tables in my application, I developed a Table mixin that manages pagination for my collection of records: @Component export defa ...

Are there any web browsers that automatically switch to a non-SSL connection if an attempt to connect with SSL

I regularly utilize jQuery along with jQuery.ajax to make connections between pages. I am interested in establishing a connection from a non-SSL page to an SSL page using ajax. Are there any web browsers that will attempt to connect via non-SSL if the con ...

Tips on utilizing an npm package for development without the need to rebuild it repeatedly

When working on my local npm package clone, I am utilizing `npm link` to connect it. Within the package.json file of this npm package, the entrypoint is configured as dist/index.js. To avoid constantly rebuilding the project during development, how can I ...

Creating a seamless connection between a nodejs backend and a frontend interface

I'm facing an issue with my CRUD app developed using nodeJs. The app interacts with a mysql database to perform Create, Insert, Delete, and Read operations. Here's an example of a read operation: app.get('/run',(req,res) => { con ...

Only initiate the loading of the iframe within the div upon clicking a specific element

Is there a way to delay loading the content of a div until it's clicked, instead of having all data loaded at once when the page loads? I noticed that removing unnecessary divs made the page load much faster. How can I prevent all data from being loa ...

Angular 7: Polyfill required for npm package to support 'Class'

I am encountering an issue where my Angular 7-based app is not functioning in Internet Explorer 11. The npm package I am using begins in index.js: class PackageClass { // code } While the app works as intended in other browsers, it fails to open in ...

Utilize SCSS in a React component during server-side rendering

Currently, I am in the process of developing a skeleton project that includes webpack, react, express, and server-side rendering (SSR). An issue I have encountered is the inability to import SCSS files into my React components. I have experimented with v ...