Search code examples
javascriptasp.net-corebundlebundling-and-minificationasp.net-core-3.1

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?


Solution

  • 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

    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