[Interview] 16_Webpack optimization

0. Production mode packaging comes with optimization

tree shaking, Kill some imported but not used code

Scope hositingAnalyze 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!

7. externals

Guess you like

Origin blog.csdn.net/dangpugui/article/details/114824327