This is the seventh day of my participation in the More text Challenge. For details, see more text Challenge

preface

If you make it to this chapter, you will have written a fairly complete WebPack project. However, the project is missing some optimizations.

Here’s how WebPack can be optimized, both in terms of packaging size and build speed.

Optimize packaging volume

Mode choice

The mode selection affects the actual packaging volume, for example, the production mode automatically turns on tree-shaking (removing js code), TerserPlugin (squeezing JS code), and so on. Choosing the right mode for different environments will help optimize the packaging volume (and actually have an impact on the build speed).

Optimize build speed

Use plugin/ Loader optionally

Select the appropriate plugin/loader based on the environment or mode. For example, the compressed CSS plugin (CSS-minimizer-webpack-plugin) is not needed in development mode at all, so removing the plugin from the Development mode configuration can speed up the build. In simple terms, use the plugin/ Loader as little as possible.

Babel cache

The previous article mentioned turning on caching with cacheDirectory, but I won’t repeat it here.

Devtool choice

Devtool is a debugging option that controls whether and how source maps are generated. The choice of DevTool affects build speed.

What is a Source map?

Source map is a kind of mapping file. The code in the JS file we package is the code converted by various laoder, not the source code (the original code looks like). Source Map is used to map the source code, which is to solve the problem where the code printed by the console should correspond to the source code. It is convenient for programmers to debug.

For more, see ruan Yifeng’s article.

Devtool type

There are many types of Devtool, but I won’t list them all. You can just look at the official documentation. Let’s just give you the best choice.

The best choice

In development mode, eval-source-map and eval-cheap-modole-source-map are recommended. The eval-source-map can trace the lines of the source code, while the eval-cheap-modole-source-map can only trace the lines.

In production mode, it is recommended to use nosource-source-map, which allows the debugger to see nosource information, only the source and line of the source.

Devtool is configured this way in WebPack.

webpack.dev.js

module.exports = merge(common, {
    ...
    devtool: 'eval-source-map'. }Copy the code

webpack.prod.js

module.exports = merge(common, {
    ...
    devtool: 'nosources-source-map'. }Copy the code

conclusion

Of course, webPack optimizations go far beyond these (all of which are fairly basic), and there are various configurations that can be used, such as HappyPack, SplitChunksPlugin, and dynamic import.

Refer to the article

  1. Webpack build performance
  2. webpack devtool
  3. Learn The Webpack DevTool from the ground up

There is a separate WebPack code.

I highly recommend reading the above articles, which are all focused on optimizing WebPack.

series

Using WebPack5 (0) : Concepts Using WebPack5 (1) : Starting Using WebPack5 (2) : Configuring Multiple environments Using WebPack5 (3) : Loading the CSS Using WebPack5 (4) : Load resource file Webpack5 use (5) : Babel translation JS code use (6) : optimization