Why optimize?

The more pages a project involves, the more functional and business code it will take, and the longer the Webpack will take to build, so consider optimization.

Optimize the webpack build speed

1. Use older versions of WebPack and Node

  • Webpack4 builds nearly 40% faster than Webpack3 builds
  • V8 optimization measures include: for of replacing forEach, Map and Set replacing Object, including replacing indexOf
  • Webpackage 4 uses the faster MD4 hash algorithm instead of MD5

2. Multi-process/multi-instance build

  • Use threadloader to parse resources, provided by Webpack4. The principle is that each webpack parses a module, and Threadloader assigns it and its dependencies to worker threads to achieve multi-threaded construction

3. Parallel compression

  • Use the parallel-Ugliffe -plugin plugin
  • Turn on the PARALLEL parameter with uglifyjs-webpack-plugin
  • Enable the PARALLEL parameter using terser-webpack-plugin (recommended)

4. The subcontract

  • Set Externals: The basic packages such as VUE and UI library are imported through CDN without being imported into the bundle to separate the base libraries
  • Pre-compiled resource modules: DLLPlugin + DLLReferencePlugin(recommended) : By combining vue, UI libraries and other base packages and services

Packages are packaged into a file. DLLPlugin extracts multiple base packages or business base packages and generates a package file and manifest.json (a description of separated packages). Then in practical applications, DLLReferencePlugin can associate separated packages with manifest.json references.

5. The cache

Enabling caching on build projects can speed up secondary builds.

  • You can enable the cache by label-loader, so that the contents of the cache can be directly read when Babel converts JS and JSX syntax next time
  • During the code compression phase, caching can be enabled using UglifyJsPlugin or TerserWebpackPlugin
  • Cache-loader or hard-source-webpack-plugin can improve the cache during module transformation

6. Narrow your build goals

  • Less building modules: for some third-party modules, we can not need to do a step of parsing, such as babel-loader can not parse node_modules some third-party packages such as UI library
  • Reduce file search scope: optimize resolve. Modules configuration to reduce module search level; Optimized resolve.mainFields configuration, optimized entry configuration; Optimize the resolve.extensions configuration to optimize the suffix for finding file pairs. Use aliases properly.
  • Exclude /include: Determines the range of loader rules

Refer to the article: pcaaron. Making. IO/pages/fe/we…

Github.com/lgwebdream/…

Optimize the webPack build volume

1. Delete the invalid CSS

  • PurifyCss: Traverses code to identify used CSS classes by calSS flags for used and not used CSS classes

2. Image compression

  • Through the image – webpack – loader

3. Compress code

4. Dynamic Polyfill