WebPack packaging performance optimization

This article refers to the following blog post

• WebPack actual combat tutorial

Preface

  When working on a project, I started debugging locally, and deployed it to the server after debugging. Occasionally, there would be discrepancies with local debugging, which caused the need to repackage and redeploy, which was quite time consuming.

  In order to solve this problem, you can use webpack to pack instantly, check the local modification directly and automatically pack to check the final situation. This way directly check the server-side running results, you can quickly find the problem, and the user sees is what you get, and the risk is small.

  But when the project is relatively large, the packaging speed directly affects the efficiency of our development. This section summarizes some common methods about webpack to improve the packaging speed for later review.

Development environment performance optimization

HMR (required)

  Hot module replacement. During the development process, when a module changes, only the changed module is packaged, and the unmodified module is not repackaged.

  HTML generally has only one file and no configuration is required.

  CSS files generally use style-loader, which will enable the hot module replacement function by default, and no configuration is required.

  The js file needs to be configured manually.

source-map

  Provide the mapping from source code to built code (if the built code goes wrong, the source code can be traced through the mapping)

  [inline- | hidden- | eval-][nosources-][cheap-[module-]] source-map

• source-map : the exact information of the error code and the error location of the source code (outside)
• inline-source-map : the exact information of the error code and the error location of the source code (inside)
• hidden-source-map : error code error reason, but no error location (outside)
• eval-source-map : each file generates a corresponding source-map , the exact information of the error code and the error location of the source code (inside)
• nosources-source-map : The error code is accurate, but there is no source code information (outside)
• cheap-source-map : The exact information of the error code and the location of the source code error. Can only be accurate to the line (outside)
• cheap-module-source-map : The exact information of the error code and the error location of the source code, the module will addthe source-map of the loader (outside)

  The difference between inline and external:

1. Files are generated externally, but not inline.
2. Inline builds are faster.

  Suggest:

1. Use in development environment: eval-source-map / eval-cheap .
2. Use in production environment: source-map / cheap-module-source-map .

Production environment performance optimization

Optimize packaging and build speed

oneOf

  Specify only one of the loader .

Cache

  babel cache: to be es6 conversion cache

Multi-process packaging

  Improve the packaging speed. Note: It takes about 600ms for each process to start . You need to weigh the project size to decide whether to start.

externals

  Let some libraries not be packaged and introduced in html through CDN .

dll

  First package a certain library directly, and then do not package it again. Two configuration files are required, dll and config .

Optimize code performance

Cache (the second access speed is more block)

1. hash : A unique hash value is generated every time the file is packaged, regardless of whether the file changes.
2. chunkhash : If the packages come from the same entry, they belong to the same chunk and share a hash value.
3. contenthash : According to the file content claim hash value, the file content is different, the hash value must be different.

tree shaking

  Remove the unused code in the business program and make the code smaller. (The es6 module must be turned on , and the production environment will be turned on automatically)

code split

  Single entry: The js file code will be loaded into one file, which is too large. You can split a bundle into multiple and load them in parallel to improve the speed.

  Multi-entry: There are several entrances to output several bundles . After the optimization is added , the same file will not be packaged repeatedly.

  dll : Detailed packaging of third-party libraries to generate multiple files.

Lazy loading / preloading

  js is lazy loading, it is loaded only when it is used, and there is no need to not load it. The code is executed in asynchronous separation.

  js preloading: load other resources after loading (compatibility needs to be improved).

WEIGHT

  In offline mode, the page refreshes to see part of the content (currently obsolete)