Speed up Angular project builds by eliminating module tandem optimization plug-ins

background

In the recent integration of micro front-end projects, the original Angular project was built slowly, lasting 10 to 15 minutes, which seriously affected the development experience. To solve this problem, we made a simple optimization for angular project compilation and construction.

The optimization process

1. For dynamically imported modules, use the blocking strategy provided by WebPack

Starting with WebPack V4, the CommonsChunkPlugin was removed in favor of Optimization.splitchunks. Webpack will automatically split blocks based on the following conditions (translated from the official documentation) :

  • New blocks can be shared, or modules can come from the node_modules folder
  • The new block will be larger than 20KB
  • When loading blocks on demand, the maximum number of parallel requests will be less than or equal to 30
  • The maximum number of parallel requests at initial page load will be less than or equal to 30

Only the optimized configurations in the project are shown here:

optimization: { //... SplitChunks: {chunks: 'async', // Three values are optional: initial(initial module), async(loading module on demand), and all(loading module on demand) minSize: // Modules exceeding 30K are automatically removed into common modules minChunks: 1, // modules are referenced >= once, then maxAsyncRequests are removed: MaxInitialRequests: 3, // Number of concurrent chunks loaded asynchronously <=3 name: Function automaticNameDelimiter: '~', // Name delimiter: {// Cache group, which inherits and overwrites the configuration of splitChunks default: {// Module cache rule, set to false, the default cache group will disable minChunks: 2, // the modules are referenced >=2 times, splitting into vendors public module priority: -20, // reuseExistingChunk: true, // using existing modules by default}, vendors: {test: / / \ \ / node_modules / \ \ / /, / / the default module of split node_modules priority: - 10,,}},},},Copy the code

The effect of this method is not very obvious, the construction speed is slightly improved

2. Skip module series

Here is a way to take space in time, in the webpack = = optimization. ConcatenateModules = = the default value is true for the configuration items, used in webpack segment of a graphic to find module, which can be safe to merge into a single module.

Specific steps:

A, install custom-webpack

npm i -D @angular-builders/custom-webpack
Copy the code
 "dependencies": {
    "@angular-builders/custom-webpack": "^8",
    ...
Copy the code

B. Change the angular.json configuration to the following

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "libraryName": "ng-alain",
              "libraryTarget": "umd"
            }
          },
          ...
Copy the code

C. Add a configuration file in extra-webpack.config.js. If the file does not exist, create one

module.exports = {
    ...
    optimization: {
       concatenateModules: false
    }
    ...
};
Copy the code

The effect of this method is obvious, and the construction speed changes significantly

The results of

The speed of project builds and compilations has improved, with Angular packaging time dropping from an average of around 15 minutes to 4-5 minutes. Overall, the project packaging time is 40-50% shorter than before.