Compress JS code with terser

webapck Compression is provided in js The way the code works , You can remove useless code 、 Replace variable name, etc , Reduce the volume of compiled files , Increase loading speed .

Different mode

stay webpack The configuration file webpack.config.js Through will mode Set to development perhaps production, The code will be processed differently .

You can find ,production Files compiled in mode , File and variable names have been modified 、 Blank line breaks are removed , Even if you don't configure it yourself ,webpack We will also set production By default, some attributes are added in the mode of , Here, for example. js Code compression uses TerserPlugin .

terser

TerserPlugin Processing code depends on terser This tool , terser It can be installed directly and used independently , When using, there are many configurations that can be defined by yourself , For details, please refer to Official documents

One of them belongs to compress options

• arrows — The arrow function body in the object has only one sentence
• arguments — arguments Parameter conversion
• dead_code — Remove unreachable code (remove unreachable code)

The following belong to mangle options

• toplevel — Should the top-level scope be defaced
• keep_classnames — The class name is reserved
• keep_fnames — Keep the function name

adopt npm install terser After installing dependency , Direct execution terser Command statement npx terser ./src/index.js -o ./terser/default.js, There is no configuration here , So the default processing method is used , Only remove line breaks .

Customize js How the code is compiled ,npx terser ./src/index.js -o terser/index.min.js -c arguments,arrows=true -m toplevel,keep_classnames,keep_fnames

The above configuration indicates

• Function to use arguments when , Convert to formal parameter
• When the arrow function body has only one sentence , Remove return
• Vilify variables in the top-level scope , For example, the variable name message Turn into o
• Keep the class name
• Keep the function name

You can see , The compiled code removes spaces and newlines , And some other specified processing

To make it easier to read , Format the compiled code

TerserPlugin

In the project , There's a lot of js Files need to be compressed , It will be too troublesome to specify the Compilation Rules one by one , adopt TerserPlugin Unified configuration can solve this problem .

adopt npm install terser-webpack-plugin --save-dev After installing dependency , stay webpack.config.js The corresponding configuration is defined in the file , More configurations can be found in Official documents

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

module.exports = {
    
  //  Other configurations are omitted  
  mode: 'production',
  optimization: {
    
    minimize: true,
    minimizer: [
      new TerserPlugin({
    
        terserOptions: {
    
          compress: {
    
            arguments: true,
            dead_code: true,
          },
          toplevel: true,
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ],
  },
};

Of the compiled file js The code is compressed into one line , After formatting, you can see the corresponding processing

summary

terser It's a tool , With compression 、 Conversion processing js Code and other functions , Through the command line, you can directly js File for compilation .

But in the project , Use it directly terser Too complicated , So with terser-webpack-plugin Unified compilation , When mode by production when , There is a default configuration , You can also define processing rules by yourself .

That's all terser and TerserPlugin Introduction to , More information about webpack You can refer to my other blog posts , Ongoing update ~