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 => ({
@@ -26,17 +29,31 @@ module.exports = options => ({
   },
   module: {
     rules: [
+      {
+        oneOf: [
           {
             test: /\.[jt]sx?$/,
             exclude: /node_modules/,
-        use: {
+            use: [
+              {
+                loader: 'thread-loader', // 开启多进程
+                options: {
+                  workers: threads, // 数量
+                },
+              },
+              {
                 loader: 'babel-loader',
-          options: options.babelQuery,
+                options: {
+                  ...options.babelQuery,
+                  cacheDirectory: true, // 开启babel编译缓存
+                  cacheCompression: false, // 缓存文件不要压缩
+                },
                 // options: {
                 //   presets: ['@babel/preset-typescript'],
                 //   plugins: ['@babel/plugin-proposal-optional-chaining'],
                 // },
               },
+            ],
           },
           {
             // Preprocess our own .css files
@@ -60,20 +77,22 @@ module.exports = options => ({
                     // 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$/)
+                        const matchRule = slash(context.resourcePath).match(
+                          /@wisdom-cesium\/(krpano)(.*).less$/,
+                        );
                         if (matchRule && matchRule[2]) {
                           if (/rc-slider/.test(matchRule[0])) {
-                        return localName
+                            return localName;
                           }
-                      const className = matchRule[2].
-                        split('/')
+                          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, '-')
+                            .map(a => a.toLowerCase())
+                            .join('-');
+                          return `panda-krpano-${className}-${localName}`.replace(/--/g, '-');
                         }
-                    return localName
+                        return localName;
                       }
 
                       if (
@@ -181,6 +200,8 @@ module.exports = options => ({
           },
         ],
       },
+    ],
+  },
   plugins: options.plugins.concat([
     // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
     // inside your code for any environment checks; Terser will automatically

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",