IIS + compression-webpack-plugin (gzip) - Loading failed for the "script" with source

Question

I use compression-webpack-plugin for compressing my javascript files into gz format in my ASP.NET MVC 5 project.

Part of my webpack.config.js with compression-webpack-plugin settings:

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
//...
  plugins: [
  //...
    new CompressionPlugin({
      test: /\.(js|css)$/,
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      deleteOriginalAssets: true
    }),
  ],
//...
};

It's works fine:

The next step is enabling GZIP compression in IIS, so first of all I make sure that I have necessary features in Windows Features:

... and enabling compression for my app directly in IIS like on the below picture.

Additionaly I've added this piece of code to my Web.config:

<system.webServer>
   <urlCompression doStaticCompression="true" doDynamicCompression="true" />
</system.webServer>

After building scripts are not loaded by web browser - I've got warnings for every script file in console:

Loading failed for the "script" with source „http://192.168.100.100:8088/Scripts/dist/runtime.7b9bc97b36a783fd7495.js”.

What have I done wrong? Should I set up something else in my backend? Please notice that I include script with .js extension, not .js.gz - it's a mistake?

Answer 1

Ok, finally, after realy deep searching I've found a solution.

1. Disable dynamic and static compression in IIS for project (because I've already gziped files so leave CPU alone!)

2. Download and install URL Rewrite module for IIS from here: https://www.iis.net/downloads/microsoft/url-rewrite

3. Remove from Web.config below line (if still exists):

<urlCompression doStaticCompression="true" doDynamicCompression="true" />

4. Add to Web.config below piece of code:

<system.webServer>
<staticContent>
  <remove fileExtension=".js.gz" />
  <remove fileExtension=".css.gz" />
  <remove fileExtension=".png.gz" />
  <remove fileExtension=".jpg.gz" />
  <remove fileExtension=".gif.gz" />
  <remove fileExtension=".svg.gz" />
  <remove fileExtension=".html.gz" />
  <remove fileExtension=".json.gz" />
  <mimeMap fileExtension=".js.gz" mimeType="application/javascript" />
  <mimeMap fileExtension=".css.gz" mimeType="text/css" />
  <mimeMap fileExtension=".png.gz" mimeType="image/png" />
  <mimeMap fileExtension=".jpg.gz" mimeType="image/jpeg" />
  <mimeMap fileExtension=".gif.gz" mimeType="image/gif" />
  <mimeMap fileExtension=".svg.gz" mimeType="image/svg+xml" />
  <mimeMap fileExtension=".html.gz" mimeType="text/html" />
  <mimeMap fileExtension=".json.gz" mimeType="application/json" />
</staticContent>

<rewrite>
  <outboundRules rewriteBeforeCache="true">
    <rule name="Custom gzip file header">
      <match serverVariable="RESPONSE_CONTENT_ENCODING" pattern=".*" />
      <conditions>
        <add input="{REQUEST_URI}" pattern="\.gz$" />
      </conditions>
      <action type="Rewrite" value="gzip"/>
    </rule>
  </outboundRules>

  <rules>
    <rule name="Rewrite gzip file">
      <match url="(.*)"/>
      <conditions>
        <add input="{HTTP_ACCEPT_ENCODING}" pattern="gzip" />
        <add input="{REQUEST_FILENAME}.gz" matchType="IsFile" />
      </conditions>
      <action type="Rewrite" url="{R:1}.gz" />
    </rule>
  </rules>
</rewrite>
  </system.webServer>

5. Make sure you have .gz in MIME types in IIS: