1. Tree shaking

Concept: A module may have multiple methods, and when one of them is used, the entire file is packaged into a Budle file. Tree shaking is typing only used methods into a Budle file, while unused methods are erased during the Uglify phase

Modules :false in babelrc. Production mode is enabled by default

Requirements: Must be es6 syntax, CJS mode is not supported

2, the principle of

1. Dead Code Elimination (DCE)

The characteristics of the DCE

  • Code not executed, unreachable (eg:if(false){console.log(‘ye’)})
  • The result of code execution will not be used (fixed methods are never used)
  • The code only affects dead variables (write, not read)

The principle of

List the features of es6 modules

  • Can only appear as a statement at the top level of a module
  • Import modules can only be string constants
  • Imoport Binding is immutable

Code erasure: The Uglify phase removes useless code

ES6 module dependencies are deterministic, independent of runtime state, and can be reliably statically analyzed, which is the basis for tree-shaking. The so-called static analysis does not execute the code, from the literal analysis of the code, ES6 modular, for example, we can dynamically require a module, only after the implementation of the reference module, this can not be optimized through static analysis

3. How to delete useless CSS

The default is to delete useless JS. How to delete useless CSS?

There are two ways:

2, uncSS: HTML needs to be recorded by jsDOM. All styles are parsed by PostCSS. Document. querySelector is used to identify non-existing selectors in HTML files

Application:

To use purges-webpack-plugin, you need to use it with mini-CSs-extract-pluginp

    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
    }),
  ]

Copy the code