Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET Core BundleMinifier removes async modifier after minification

I added bundleconfig.json to ASP.NET Core application. It has the following structure:

[
  {
    "outputFileName": "wwwroot/js/main.min.js",
    "inputFiles": [
      "wwwroot/js/scripts/first.js",
      "wwwroot/js/scripts/second.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

Both scripts has been minified and merged into main.min.js. But after minification all async modifiers has been removed from result script.

Function such as

async function foo() {
  await /* some promise */;
}

have been turned into:

function foo() {await /*some promise*/;}

How do I avoid removing async modifier?

like image 769
Pupkin Avatar asked Feb 03 '20 08:02

Pupkin


People also ask

What is true about bundling and minification in asp net core?

Bundling and minification are two distinct performance optimizations you can apply in a web app. Used together, bundling and minification improve performance by reducing the number of server requests and reducing the size of the requested static assets.

Which of these is the correct way to configure bundling and minification?

Click on wwwroot folder, select the css file you want minified, then right click and choose bundler & minifier. Then from popup minify file. It will be the same file name with the minified version. Also generate bundleconfig.

What is difference between bundling and minification?

Both bundling and minification are the two separate techniques to reduce the load time. The bundling reduces the number of requests to the Server, while the minification reduces the size of the requested assets.

What are the different ways for bundling and minification in asp net core?

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. Bundling combines multiple files into a single file. Minification performs a variety of different code optimizations to scripts and CSS, which results in smaller payloads.


1 Answers

I'v reproduced the issue and tried to minify a simple js file that using ES6 specifications and later.

Test.js

async function foo() {
    await bar();
}
async function bar() {
    for (var i = 0; i < 10; i++) { // do some work
    }
}

Then i tried to minify the file with Bundler and Minifier tool then this error thrown:

enter image description here

This means Bundler and Minifier doesn't support ES6 specifications and later.

For confirmation i started searching about this issue in the Github and i found these same behaviors

  • Crash on ES6 arrow functions in source files
  • minify es6 js file without turning them to es5
  • Where BundleMinifier currently is usefull (and where not)

I can surely claim that this is The Transpilers Issue

Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language.

The most common and widely use one is TypeScript

TypeScript in some cases Transpiles ES6 and later to ES5

For example: if you set Target to ES6 and ES2015 it Transpiles to ES5. However, if You Target to ES2020 does NOT Transpile your code.

At The End

  • BundlerMinifier uses NUglify that perform javascript code minification So There is NO way minifying ES6 and later codes by using Bundler and Minifier. Unless, The Author decides to support it.
  • You are encountering The Transpile Issue (ex:ES6 to ES5).
  • Bundler & Minifier doesn't remove unknown keywords like async but thrown error
like image 174
A Farmanbar Avatar answered Oct 24 '22 11:10

A Farmanbar