0. Production mode packaging comes with optimization
tree shaking
, Kill some imported but not used code
Scope hositing
Analyze the dependencies between the modules, and merge the scattered modules into one function as much as possible, with a smaller volume
Code compression and obfuscation
1. CSS optimization
Extract CSS to a separate file, automatically add CSS prefix, turn on CSS compression
2. JS optimization
Three common methods of code separation
Entry starting point: use entry configuration, separate code manually
Place duplicates: use SplitChunksPlugin to remove duplicates and separate chunks
Dynamic import: Separate code through inline function calls of modules
4. noParse
Prevent webpack from wasting energy to resolve these libraries that it knows have no dependencies
5. IgnorePlugin
For example, ignore all language packs and load them on demand!
6. DLLPlugin
When introducing some third-party modules, such as Vue, React, etc., the files of these frameworks are generally not modified, and each time they are packaged, they need to be parsed, which will affect the packaging speed!