I. Introduction

As the front-end projects gradually expand, one of the problems that will inevitably arise is performance.

Especially in large and complex projects, the front-end business may freeze or even crash the entire page due to a small data dependency

After the general project is completed, it will be packaged through webpack. Using webpack to optimize the performance of front-end projects is a very important link

2. How to optimize

The means of optimizing the front end through webpack are:

1. JS code compression

terser is a JavaScript interpretation, meat grinder, and compressor tool set that can help us compress and uglify our code and make the bundle smaller.

In production mode, webpack uses TerserPlugin to process our code by default. If you want to customize it, configure it as follows:

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true // Number of computer cpu cores-1
            })
        ]
    }
}

The properties are introduced as follows:

• extractComments: The default value is true, which means that the comments will be extracted into a separate file. During the development stage, we can set it to false to not keep the comments
• parallel: use multiple processes to run concurrently to improve the speed of the build, the default value is true, the default number of concurrent runs: os.cpus().length - 1
• terserOptions: Set our terser related configuration:
  • compress: Set compression-related options,
  • mangle: Set options related to uglification, which can be directly set to true
  • mangle: Set options related to uglification, which can be directly set to true
  • toplevel: Whether the underlying variable is converted
  • keep_classnames: keep the names of the classes keep_fnames: keep the names of the functions

2.CSS code compression

CSS compression usually removes useless spaces, etc., because it is difficult to modify selectors, attribute names, values, etc.
For CSS compression, we can use another plugin: css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin -D

The configuration is as follows:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
    // ...
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                parallel: true
            })
        ]
    }
}

3.Html file code compression

When using the HtmlWebpackPlugin plug-in to generate HTML templates, optimize HTML by configuring the attribute minify

module.exports = {
    ...
    plugin:[
        new HtmlwebpackPlugin({
            ...
            minify:{
                minifyCSS:false, // whether to compress css
                collapseWhitespace:false, // Whether to fold spaces
                removeComments:true // Whether to remove comments
            }
        })
    ]
}

If minify is set, another plugin html-minifier-terser will actually be used

4. File size compression

Compress the file size to reduce the loss of broadband during http transmission

npm install compression-webpack-plugin -D

new ComepressionPlugin({
    test:/\.(css|js)$/,  // Which files need to be compressed
    threshold:500, // Set the size of the file to start compressing
    minRatio:0.7, // at least the ratio of compression
    algorithm:"gzip", // The compression algorithm used
})

5. Image compression

Generally speaking, after packaging, the size of some image files is much larger than that of js or css files, so image compression is more important

The configuration method is as follows:

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            // Configuration for compressing jpeg
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            // Use imagemin**-optipng to compress png, enable: false is off
            optipng: {
              enabled: false,
            },
            // Compress pngs with imagemin-pngquant
            pngquant: {
              quality: '65-90',
              speed: 4
            },
            // Configuration for compressing gif
            gifsicle: {
              interlaced: false,
            },
            // When webp is enabled, jpg and png images will be compressed into webp format
            webp: {
              quality: 75
            }
          }
        }
      ]
    },
  ]
} 

6.Tree Shaking

Tree Shaking is a term that means eliminating dead code in computers, relying on ES
Static syntax analysis of Module (do not execute any code, you can clearly know the dependencies of the module)

7. Code separation

Separate the code into different bundle s, and then we can load these files on demand, or load these files in parallel

By default, all JavaScript codes (business codes, third-party dependencies, and temporarily unused modules) are loaded on the homepage, which will affect the loading speed of the homepage

Code separation can separate smaller bundle s, control resource loading priority, and improve code loading performance

This is achieved through splitChunksPlugin, the plugin webpack has been installed and integrated by default, and only needs to be configured

In the default configuration, chunks are only for asynchronous (async) requests, we can set it to initial or all.

The main attributes of splitChunks are as follows:

• Chunks, whether to process synchronous code or asynchronous code
• minSize: The size of the split package, at least minSize, if the size of the package does not exceed minSize, this package will not be split
• maxSize: Split packages larger than maxSize into packages not smaller than minSize
• minChunks: the number of times to be introduced, the default is 1

8. Inline chunk s

Some chunk modules can be inlined into html through the InlineChunkHtmlPlugin plug-in, such as runtime code (code related to module parsing, loading, and module information). The amount of code is not large, but it must be loaded

3. Summary

Regarding the optimization of front-end performance by webpack, you can start with the size of the file, and then you can also optimize the front-end performance by subpackaging and reducing the number of http requests.