Terser

Terser is a JavaScript Parser, Mangler /Compressor tool set that removes unused code and compresses multiple lines of code into one line

Terser helps us compress and uglify our code, making our bundles smaller

Terser is a stand-alone tool that can be installed separately

In the early days we used Uglip-JS to compress and uglify our JavaScript code, but it is no longer maintained and does not support ES6+ syntax;

Terser comes from uglip-es fork and retains most of its original API as well as adapting uglip-es and uglify-js@3, etc

#The installation
npm i terser

#use
npx terser ./src/index.js -o index.min.js
#Is equivalent to
npx terser ./src/index.js -o index.min.js -c defaults

#Multiple options are separated by commas
#If only the option name is used, the default value is used for the use of no configured value
npx terser ./src/index.js -o index.min.js -c arrows,arguments=true

#Use the default form for compression. By default, only the parameters of a function are compressed
npx terser ./src/index.js -o index.min.js -m

#All code is compressed
npx terser ./src/index.js -o index.min.js -m toplevel=true
Copy the code

However, in the actual development, we use Terser to configure our code from scratch, which is very tedious. For this purpose, WebPack uses the built-in plug-in TerserWebpackPlugin, which carries out a series of general default configurations for Terser.

The TerserWebpackPlugin allows us to process our code directly from WebPack rather than manually through Terser

Since the TerserWebpackPlugin is used by default within WebPack, we can introduce it directly because the TerserWebpackPlugin is already installed as a dependency of WebPack

configuration

There is a Minimizer property in Webpack, and in Production mode the default is to use the TerserPlugin to process our code

If we are not satisfied with the default configuration, we can create instances of the TerserPlugin ourselves and override the relevant configuration

  1. First, we need to turn it on to compress our code (it is already on by default in Production mode, but it needs to be on manually if it is used in development mode).

  2. Second, we can create a TerserPlugin option in Minimizer and configure it accordingly

optimization: {
  minimizer: [
    new TerserPlugin({
      // Do not extract comments
      extractComments: false.// Whether to compile using multiple threads -- the default is true
      // Can be set to number, that is, manually specify how many processes to pack
      // Can also be set to true, in which case parallel is cpus. Length-1
      parallel: true.terserOptions: {
        // Configure terser manually here
        // The configuration here overrides the default terser configuration}}})]Copy the code

CSS compression

CSS compression usually removes useless whitespace, etc., because it is difficult to change the names of selectors, properties, values, etc.

For CSS compression we can use another plugin: CSS-minimizer-webpack-plugin

#The installation
npm install css-minimizer-webpack-plugin -D
Copy the code

configuration

plugins: [
  new CssMinimizerWebpackPlugin()
]
Copy the code

Scope Hoisting

Scope has added a new function starting with Webpack3

The functionality is to improve the scope and make webpack code smaller and faster

By default, the WebPack package has many function scopes, including some (such as the outermost)IIFE

  • There are a number of functions that need to be executed from the very beginning of the code to the loading of a module;
  • Scope can combine all functions that can be combined into a module to run in a module, thus saving the performance consumption when unnecessary function calls
  • Webpack runningScope HoistingStatic analysis of the ES Module
  • It is therefore recommended that all modules in Webpack be introduced and used using ES Module

Scope is very simple to use, webpack has built-in corresponding modules:

  • In Production mode, this module is enabled by default
  • In development mode, we need to open the module ourselves;
plugins: [
  new webpack.optimize.ModuleConcatenationPlugin()
]
Copy the code