1. Using cache, enable cache configuration for Webpack

If cache is enabled, Webpack will cache modules and chunks of production. If the content does not change in the next build, Webpack can directly reuse the cached content to improve compilation performance.

HardSourceWebpackPlugin, suitable for production environment

There is no caching of intermediate results during compilation within Webpack. If you can cache the intermediate results of Webpack compilation, you can speed up compilation the next time. The HardSourceWebpackPlugin is designed to solve this problem.

3. Multi-threading

In addition to caching, another way to speed up Webpack compilation is through parallel execution through multiple threads. Typical tools are Thread-loader from HappyPack and Webpack. Both functions are similar. HappyPack needs to configure plugin and Loader at the same time. The latter thread-loader only needs to be configured in loader, and it is also an official Webpack maintenance tool, so we use Thread – Loader.

4. Precompile

DllPlugin plugin: Used to package out separate DLL (dynamic link library) files. DllReferencePlugin: Used to introduce DLL files packaged by DllPlugin into configuration files.