Webpack5 learning -- code compression

Terser

Terser It's a JavaScript The explanation of (Parser)、Mangler( Meat grinder defacing )/Compressor( compressor Remove unused code , Compress multiple lines of code into one line ) The toolset of

Terser Can help us compress 、 Vilify our code , Let's have bundle To become smaller

Terser It's a stand-alone tool , It can be installed separately

In the early days we would use uglify-js To compress 、 Vilify our JavaScript Code , But it is no longer maintained , And does not support ES6+ Of grammar ;

Terser It's from uglify-es fork Over here , And keep most of it API And adaptation uglify-es and [email protected] etc.

#  install 
npm i terser
 #  Use 
npx terser ./src/index.js -o index.min.js
#  Equivalent to 
npx terser ./src/index.js -o index.min.js -c defaults
 #  Multiple options are separated by commas 
#  If only the option name , If there is no configuration value, the default value is used 
npx terser ./src/index.js -o index.min.js -c arrows,arguments=true
 #  Compress using the default form , By default, only the parameters of the function are compressed 
npx terser ./src/index.js -o index.min.js -m
 #  All the code is compressed 
npx terser ./src/index.js -o index.min.js -m toplevel=true
 Copy code 

however , In actual development , We use... From zero Terser Configure our code accordingly , It's very cumbersome , So webpack Using built-in plug-ins TerserWebpackPlugin, This plug-in has internal pairs terser A series of general default configurations are made .

TerserWebpackPlugin So we don't have to go through it manually terser To handle our code , But directly through webpack To deal with it

because webpack The internal default will use TerserWebpackPlugin, So we can just introduce it directly , because TerserWebpackPlugin It's been done webpack The dependencies are installed

To configure

stay webpack There is one of them. minimizer attribute , stay production In mode , The default is to use TerserPlugin To handle our code

If we are not satisfied with the default configuration , You can also create your own TerserPlugin Example , And override the relevant configuration

1. First , We need to open it minimize, Let it compress our code ( Default production Mode has been turned on , If it's in development When used in mode , It needs to be opened manually )

2. secondly , We can do it in minimizer Create a TerserPlugin Options , And configure it accordingly

optimization: {
  minimizer: [
    new TerserPlugin({
      //  Will not  comments To withdraw 
      extractComments: false,

      //  Whether to use multithreading for compilation  ---  The default value is true
      //  It can be set to number, That is, manually specify how many processes to set for packaging 
      //  Can also be set to true, here parallel The value is cpus.length - 1
      parallel: true,

      terserOptions: {
        //  Right here. terser Do manual configuration 
        //  The configuration here overrides the default  terser  Configuration in 
      }
    })
  ]
}
 Copy code 

CSS Compress

CSS Compression is usually to remove useless spaces, etc , Because it's hard to modify selectors 、 Name of property 、 It's worth waiting for ;

CSS We can use another plug-in :css-minimizer-webpack-plugin

#  install 
npm install css-minimizer-webpack-plugin -D
 Copy code 

To configure

plugins: [
  new CssMinimizerWebpackPlugin()
]
 Copy code 

Scope Hoisting

Scope Hoisting from webpack3 A new feature that began to be added

The function is to promote the scope , And let webpack The packaged code is smaller 、 Run faster

By default webpack Packaging will have many function scopes , Including some ( Like the outermost )IIFE

• Whether it's running from the beginning of the code , Or load a module , All need to execute a series of functions ;
• Scope Hoisting Functions that can be merged into a module , Merge all into one module to run , So as to save the performance consumption of unnecessary function calls
• webpack Running Scope Hoisting When , In fact, it depends on ES Module Static analysis of ,
• So in webpack It is recommended that all modules be introduced and used ES Module Use in a way

Use Scope Hoisting Very simple ,webpack Corresponding modules have been built in :

• stay production In mode , By default, this module will be enabled
• stay development In mode , We need to open the module ourselves ;

plugins: [
  new webpack.optimize.ModuleConcatenationPlugin()
]
 Copy code