fix: webpack打包速度优化

internals/webpack/webpack.base.babel.js

+const os = require('os');
 const path = require('path');
 const webpack = require('webpack');
 const slash = require('slash2');
 const CopyPlugin = require('copy-webpack-plugin');
 const cesiumSource = './node_modules/cesium/Build/Cesium';
 const FastRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+// cpu核数
+const threads = os.cpus().length;
 const nodeLibs = require('node-libs-browser');
 console.log();
 module.exports = options => ({
@@ -27,158 +30,176 @@ module.exports = options => ({
   module: {
     rules: [
       {
-        test: /\.[jt]sx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: options.babelQuery,
-          // options: {
-          //   presets: ['@babel/preset-typescript'],
-          //   plugins: ['@babel/plugin-proposal-optional-chaining'],
-          // },
-        },
-      },
-      {
-        // Preprocess our own .css files
-        // This is the place to add your own loaders (e.g. sass/less etc.)
-        // for a list of loaders, see https://webpack.js.org/loaders/#styling
-        test: /\.css$/,
-        exclude: /node_modules/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.less$/,
-
-        use: [
+        oneOf: [
+          {
+            test: /\.[jt]sx?$/,
+            exclude: /node_modules/,
+            use: [
+              {
+                loader: 'thread-loader', // 开启多进程
+                options: {
+                  workers: threads, // 数量
+                },
+              },
+              {
+                loader: 'babel-loader',
+                options: {
+                  ...options.babelQuery,
+                  cacheDirectory: true, // 开启babel编译缓存
+                  cacheCompression: false, // 缓存文件不要压缩
+                },
+                // options: {
+                //   presets: ['@babel/preset-typescript'],
+                //   plugins: ['@babel/plugin-proposal-optional-chaining'],
+                // },
+              },
+            ],
+          },
           {
-            loader: 'style-loader',
+            // Preprocess our own .css files
+            // This is the place to add your own loaders (e.g. sass/less etc.)
+            // for a list of loaders, see https://webpack.js.org/loaders/#styling
+            test: /\.css$/,
+            exclude: /node_modules/,
+            use: ['style-loader', 'css-loader'],
           },
           {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                // localIdentName: '[name]__[local]___[hash:base64:5]'
-                // modules: true,
-                getLocalIdent: (context, _, localName) => {
+            test: /\.less$/,
 
-                  if (/@wisdom-cesium/.test(context.resourcePath)) {
-                    const matchRule = slash(context.resourcePath).match(/@wisdom-cesium\/(krpano)(.*).less$/)
-                    if (matchRule && matchRule[2]) {
-                      if (/rc-slider/.test(matchRule[0])) {
-                        return localName
+            use: [
+              {
+                loader: 'style-loader',
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: {
+                    // localIdentName: '[name]__[local]___[hash:base64:5]'
+                    // modules: true,
+                    getLocalIdent: (context, _, localName) => {
+                      if (/@wisdom-cesium/.test(context.resourcePath)) {
+                        const matchRule = slash(context.resourcePath).match(
+                          /@wisdom-cesium\/(krpano)(.*).less$/,
+                        );
+                        if (matchRule && matchRule[2]) {
+                          if (/rc-slider/.test(matchRule[0])) {
+                            return localName;
+                          }
+                          const className = matchRule[2]
+                            .split('/')
+                            .map(a => a.replace(/([A-Z])/g, '-$1'))
+                            .map(a => a.toLowerCase())
+                            .join('-');
+                          return `panda-krpano-${className}-${localName}`.replace(/--/g, '-');
+                        }
+                        return localName;
                       }
-                      const className = matchRule[2].
-                        split('/')
-                        .map(a => a.replace(/([A-Z])/g, '-$1'))
-                        .map(a => a.toLowerCase()).join('-')
-                      return `panda-krpano-${className}-${localName}`.replace(/--/g, '-')
-                    }
-                    return localName
-                  }
 
-                  if (
-                    context.resourcePath.includes('node_modules') ||
-                    context.resourcePath.includes('ant.design.pro.less') ||
-                    context.resourcePath.includes('global.less')
-                  ) {
-                    return localName;
-                  }
+                      if (
+                        context.resourcePath.includes('node_modules') ||
+                        context.resourcePath.includes('ant.design.pro.less') ||
+                        context.resourcePath.includes('global.less')
+                      ) {
+                        return localName;
+                      }
 
-                  const match = context.resourcePath.match(/src(.*)/);
-                  const matchAntd = /^ant/.test(localName);
-                  if (match && match[1] && !matchAntd) {
-                    const antdProPath = match[1].replace('.less', '');
-                    const arr = slash(antdProPath)
-                      .split('/')
-                      .map(a => a.replace(/([A-Z])/g, '-$1'))
-                      .map(a => a.toLowerCase());
-                    return `panda-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
-                  }
+                      const match = context.resourcePath.match(/src(.*)/);
+                      const matchAntd = /^ant/.test(localName);
+                      if (match && match[1] && !matchAntd) {
+                        const antdProPath = match[1].replace('.less', '');
+                        const arr = slash(antdProPath)
+                          .split('/')
+                          .map(a => a.replace(/([A-Z])/g, '-$1'))
+                          .map(a => a.toLowerCase());
+                        return `panda-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
+                      }
 
-                  return localName;
+                      return localName;
+                    },
+                  },
                 },
               },
-            },
+              {
+                loader: 'less-loader',
+                options: {
+                  javascriptEnabled: true,
+                },
+              },
+            ],
           },
           {
-            loader: 'less-loader',
-            options: {
-              javascriptEnabled: true,
-            },
+            test: /\.css$/,
+            include: /node_modules/,
+            use: ['style-loader', 'css-loader'],
           },
-        ],
-      },
-      {
-        test: /\.css$/,
-        include: /node_modules/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.(eot|otf|ttf|woff|woff2)$/,
-        use: 'file-loader',
-      },
-      {
-        test: /\.svg$/,
-        use: [
           {
-            loader: 'svg-url-loader',
-            options: {
-              // Inline files smaller than 10 kB
-              limit: 10 * 1024,
-              noquotes: true,
-            },
+            test: /\.(eot|otf|ttf|woff|woff2)$/,
+            use: 'file-loader',
+          },
+          {
+            test: /\.svg$/,
+            use: [
+              {
+                loader: 'svg-url-loader',
+                options: {
+                  // Inline files smaller than 10 kB
+                  limit: 10 * 1024,
+                  noquotes: true,
+                },
+              },
+            ],
+          },
+          {
+            test: /\.(jpg|png|gif)$/,
+            use: [
+              {
+                loader: 'url-loader',
+                options: {
+                  // Inline files smaller than 10 kB
+                  limit: 10 * 1024,
+                  outputPath: 'assets/',
+                  // name: '[name].[ext]'
+                },
+              },
+              // {
+              //   loader: 'image-webpack-loader',
+              //   options: {
+              //     mozjpeg: {
+              //       enabled: false,
+              //       // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
+              //       // Try enabling it in your environment by switching the config to:
+              //       // enabled: true,
+              //       // progressive: true,
+              //     },
+              //     gifsicle: {
+              //       interlaced: false,
+              //     },
+              //     optipng: {
+              //       optimizationLevel: 7,
+              //     },
+              //     pngquant: {
+              //       quality: '65-90',
+              //       speed: 4,
+              //     },
+              //   },
+              // },
+            ],
           },
-        ],
-      },
-      {
-        test: /\.(jpg|png|gif)$/,
-        use: [
           {
-            loader: 'url-loader',
-            options: {
-              // Inline files smaller than 10 kB
-              limit: 10 * 1024,
-              outputPath: 'assets/',
-              // name: '[name].[ext]'
+            test: /\.html$/,
+            use: 'html-loader',
+          },
+          {
+            test: /\.(mp4|webm)$/,
+            use: {
+              loader: 'url-loader',
+              options: {
+                limit: 10000,
+              },
             },
           },
-          // {
-          //   loader: 'image-webpack-loader',
-          //   options: {
-          //     mozjpeg: {
-          //       enabled: false,
-          //       // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
-          //       // Try enabling it in your environment by switching the config to:
-          //       // enabled: true,
-          //       // progressive: true,
-          //     },
-          //     gifsicle: {
-          //       interlaced: false,
-          //     },
-          //     optipng: {
-          //       optimizationLevel: 7,
-          //     },
-          //     pngquant: {
-          //       quality: '65-90',
-          //       speed: 4,
-          //     },
-          //   },
-          // },
         ],
       },
-      {
-        test: /\.html$/,
-        use: 'html-loader',
-      },
-      {
-        test: /\.(mp4|webm)$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-          },
-        },
-      },
     ],
   },
   plugins: options.plugins.concat([

internals/webpack/webpack.prod.babel.js

 // Important modules this config uses
+const os = require('os');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
@@ -7,6 +8,8 @@ const WebpackPwaManifest = require('webpack-pwa-manifest');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 
+// cpu核数
+const threads = os.cpus().length;
 module.exports = require('./webpack.base.babel')({
   mode: 'production',
 
@@ -39,7 +42,7 @@ module.exports = require('./webpack.base.babel')({
             ascii_only: true,
           },
         },
-        parallel: true,
+        parallel: threads, // 开启多进程
         cache: true,
         sourceMap: true,
       }),

package.json

@@ -265,6 +265,7 @@
         "stylelint-processor-styled-components": "1.6.0",
         "svg-url-loader": "2.3.2",
         "terser-webpack-plugin": "4.2.3",
+        "thread-loader": "^3.0.4",
         "url-loader": "1.1.2",
         "webpack": "5.70.0",
         "webpack-cli": "4.2.0",