Gzip Compression and IIS Setup on Windows Server for React Projects

Enhancing web application performance heavily relies on the size of downloaded JavaScript and CSS files. To optimize this, it's crucial to compress your static assets before delivering them across the network.

Today, I'll divulge a technique to configure your create-react-app setup for serving compressed (gzipped) files. This approach can potentially shrink the downloaded resource size by a staggering 80-90% compared to the original.

Configuring Webpack

If you initiated your React application using create-react-app, leverage @craco/craco to override your webpack configuration.

To compress .js and .css files, we'll need to tweak the webpack config. Let's start by installing the compression-webpack-plugin package and integrating it into our craco.config.js

Begin by creating the craco configuration file:

# within your project's root directory

# create the configuration file
touch craco.config.js

# install craco and the webpack plugin
npm install -D @craco/craco compression-webpack-plugin

// craco.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  webpack: {
    plugins: [
      new CompressionPlugin({ algorithm: 'gzip' }),
    ],
  },
};

Now, instead of using react-scripts for the build, we'll utilize craco. Update your package.json with a custom script:

...
"scripts": {
    "start": "react-scripts start",
    "build": "craco build",
    "build-cra": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },
...

Build the project:

npm run build

Once the build is ready, proceed to copy the build folder to the designated path on the IIS server.

web.config and IIS Setup

After transferring the build to the server, create the web.config file to configure IIS:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <directoryBrowse enabled="false" />
    <staticContent>
        <remove fileExtension=".js" />
        <mimeMap fileExtension=".js" mimeType="text/javascript" />
    </staticContent>
    <urlCompression doStaticCompression="true" />
    <httpCompression
        directory="C:\inetpub\temp\IIS Temporary Compressed Files">
        <scheme name="gzip" dll="C:\Windows\system32\inetsrv\gzip.dll" />
        <staticTypes>
          <add mimeType="text/css" enabled="true" />
          <add mimeType="text/javascript" enabled="true" />
       </staticTypes>
    </httpCompression>
</system.webServer>
</configuration>

IIS expects this file within the root of your build folder.

This setup enables IIS to compress js and css files before dispatching them to the client. Note, we've only activated static compression, as our files are already compressed during the build process.

Remember to restart your IIS after modifying web.config.

Important Notes

• Verify that your server supports compression and has this feature enabled. You might need to enable specific Windows Features; refer to this stackoverflow post for detailed guidance.

• Ensure your static files include .gz files alongside the actual files.

• Don't overlook testing your configuration using the browser's dev tools. As illustrated in the image, the Content Encoding should indicate gzip.

Conclusion

In my scenario, initially downloading 351kb of JavaScript, after optimization, it now occupies almost 37% of the original size: 155kb. Although compression ratios may fluctuate depending on the nature of your files, this usually translates to a substantial improvement.