webpack tree-snaking

Tree-Snaking

effect

• Js context eliminating unused code

principle

• Use ES6 Moudles static resolution, dependencies determine in advance
• Import removing unused code

achieve

1. By using their own webpack dependencies between ES6 Moudles analysis module is removed without the use of import module references in code.
2. Provided webpack mode = production, using a plug (terser-webpack-plugin) code unused for deletion.

note

1. webpack must be es6 modules

2. Use as a module without side effects (side Effect) of

   No side effects means: given the same input, there is the same output, without changing the external environment

3. Set sideEffect in package.json, set the side effects of file

//package.json
{
    name: 'webpack-project',
    sideEffect: ["./index.js"],
}