Webpack Performance Optimization-2

Performance Optimization - JS-CSS Code Minification

• Terser is a toolset for JavaScript parsing, mangling, and compressing.
• In the early days, we used uglify-js to minify and uglify our JavaScript code. However, it is no longer maintained and does not support ES6+ syntax.
• Terser is a fork of uglify-es and retains most of its original APIs, compatible with uglify-es and uglify-js@3, etc.

webpack-terser

JavaScript Code Minification

Webpack provides the terser-webpack-plugin plugin for code optimization and minification.

In production mode, TerserPlugin is used by default for code processing.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // Configure other Webpack options...

  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

CSS Code Minification

Apart from JavaScript code, CSS code can also be minified using Webpack. Use css-minimizer-webpack-plugin to compress CSS code.

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // Configure other Webpack options...

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      // You can continue adding other compression plugins...
    ],
  },
};

Tree Shaking Implementation in Webpack

Tree shaking is a term commonly used to describe the removal of dead code in JavaScript context.

Tree Shaking in Webpack

In modern front-end development, optimizing code size is a crucial topic. Tree shaking is an optimization technique used to eliminate unused JavaScript modules in a project, reducing the size of the bundled files. Webpack provides built-in support, making it easy to implement tree shaking in projects.

Enable ES Module Syntax

First, ensure your JavaScript code follows ES module syntax, as Webpack’s tree shaking feature only works with ES modules. Use import and export syntax to define modules in your project.

// math.js
export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

Webpack Configuration

In the Webpack configuration file, ensure the following settings to enable tree shaking:

Set mode to 'production'. Webpack will automatically enable related optimizations, including tree shaking.

Implementing Tree Shaking for JavaScript

Webpack implements tree shaking using two different approaches:

• usedExports: Marks certain functions as used, and later optimizes them with Terser.
• sideEffects: Skips entire modules/files and checks if the file has side effects.

Using usedExports to Implement Tree Shaking

Set the mode to production:

module.exports = {
  mode: 'production',
  // ...other configurations
};

Configure usedExports in the optimization section:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
 mode: 'development',
 optimization: {
   usedExports: true,
 },
};

Using sideEffects to Implement Tree Shaking

Set the sideEffects field in package.json:

• Set it to false to inform Webpack that it can safely remove unused exports.
• If there are specific files you want to keep, set it as an array.

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js"]
}

Webpack Side Effects

Understanding Tree Shaking and sideEffects

sideEffects and usedExports (more commonly considered tree shaking) are two different optimization techniques.

sideEffects is more efficient as it allows skipping entire modules/files and their entire subtree.

usedExports depends on terser to detect side effects in statements. It’s a more complex JavaScript task and is not as straightforward as sideEffects. Also, it cannot skip subtrees/dependencies because side effects need to be evaluated. While exported functions work as usual, higher-order functions (HOC) in the React framework can have issues in this scenario.

CSS Tree Shaking Implementation

For CSS tree shaking, additional plugins are required.

In the past, PurifyCss plugin was used for CSS tree shaking, but it’s no longer maintained (last update was 4 years ago).

A different library, PurgeCSS, can now be used for CSS tree shaking, helping remove unused CSS.

File Compression in Webpack

What is HTTP Compression

HTTP compression is a technique used between servers and clients to improve transmission speed and bandwidth utilization.
The process of HTTP compression is as follows:

1. Data is compressed on the server before being sent. (Can be done in Webpack)
2. Compatible browsers inform the server about supported compression formats during requests.
3. The server returns the corresponding compressed file to the browser, indicating it in the response headers.

Popular Compression Formats

There are several popular compression formats:

• compress: Method used by UNIX’s “compress” program (historical reasons, not recommended for most applications, use gzip or deflate instead).
• deflate: Compression based on the deflate algorithm (defined in RFC 1951) and encapsulated in zlib data format.
• gzip: GNU zip format (defined in RFC 1952), widely used compression algorithm.
• br: A new open-source compression algorithm designed specifically for HTTP content encoding.

Webpack Configuration for File Compression

Webpack essentially performs the first step of HTTP compression. You can use the CompressionPlugin for this purpose.

Step 1: Install CompressionPlugin:

npm install compression-webpack-plugin -D

Step 2: Use CompressionPlugin in your Webpack configuration:

module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
    }),
  ],
};

---

Note: This article is a translated version of the original post. For the most accurate and up-to-date information, please refer to the original source.
```