dros/config/index.ts

import { defineConfig, type UserConfigExport } from '@tarojs/cli';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import devConfig from './dev';
import prodConfig from './prod';
import path from 'path';
import TerserPlugin from 'terser-webpack-plugin';
import { DefinePlugin } from 'webpack';

// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig<'webpack5'>(async (merge) => {
  const baseConfig: UserConfigExport<'webpack5'> = {
    projectName: 'zsis',
    date: '2025-5-29',
    designWidth: 750,
    deviceRatio: {
      640: 2.34 / 2,
      750: 1,
      375: 2,
      828: 1.81 / 2,
    },
    sourceRoot: 'src',
    outputRoot: 'dist',
    plugins: ['@tarojs/plugin-http'],
    defineConstants: {
      // 开发环境下使用空字符串，实际请求会自动拼接当前域名
      API_BASE_URL_FROM_WEBPACK:
        process.env.NODE_ENV === 'development'
          ? '""'
          : (`"${process.env.TARO_API_URL}"`),
      MQTT_BROKER_URL_FROM_WEBPACK: `"${process.env.TARO_MQTT_URL}"`,
    },
    copy: {
      patterns: [],
      options: {},
    },
    framework: 'react',
    compiler: 'webpack5',
    // ✅ 优化：启用 Webpack 持久化缓存（在 webpackChain 中配置）
    cache: {
      enable: true, // Taro 层面启用缓存
    },
    mini: {
      postcss: {
        pxtransform: {
          enable: true,
          config: {},
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
      webpackChain(chain) {
        // ✅ 优化：配置 Webpack 持久化缓存
        chain.cache({
          type: 'filesystem',
          cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/webpack-mini'),
          buildDependencies: {
            config: [
              __filename,
              path.resolve(__dirname, './prod.ts'),
              path.resolve(__dirname, './dev.ts'),
            ],
          },
          name: `mini-${process.env.NODE_ENV || 'development'}`,
          version: '1.0.0',
        });
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
      },
    },
    h5: {
      esnextModules: [],
      publicPath: './',
      staticDirectory: 'static',
      output: {
        filename: '[name].js',
        chunkFilename: '[name].[chunkhash:8].js',
      },
      miniCssExtractPluginOption: {
        ignoreOrder: true,
        filename: 'css/[name].[fullhash].css',
        chunkFilename: 'css/[name].[chunkhash].css',
      },
      postcss: {
        autoprefixer: {
          enable: true,
          config: {},
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[fullhash:base64:5]',
          },
        },
      },

      webpackChain(chain) {
        /* 1️⃣ 排除 svg（防止被 base64）这是为了把svg解析为组件 ，用于svg icon*/
        if (chain.module.rules.has('image')) {
          chain.module
            .rule('image')
            .exclude.add(/\.svg$/)
        }

        if (chain.module.rules.has('media')) {
          chain.module
            .rule('media')
            .exclude.add(/\.svg$/)
        }

        if (chain.module.rules.has('asset')) {
          chain.module
            .rule('asset')
            .exclude.add(/\.svg$/)
        }

        chain.module
          .rule('svgr-icons')
          .before('image')
          .test(/\.svg$/)
          .include.add(
            path.resolve(__dirname, '../src/assets/Icons')
          )
          .add(path.resolve(__dirname, '../src/assets/imgs/VirtualHuman'))
          .add(path.resolve(__dirname, '../src/assets/imgs/Animal'))
          .end()
          .use('svgr')
          .loader('@svgr/webpack')
          .options({
            dimensions: false,
            icon: false,
            svgoConfig: {
              plugins: [
                {
                  name: 'preset-default',
                  params: {
                    overrides: {
                      // 禁用会合并 path 的插件
                      mergePaths: false,
                      // 禁用会移除 ID 的插件
                      cleanupIds: false,
                      // 禁用会移除 viewBox 的插件
                      removeViewBox: false,
                      // 移除编辑器命名空间（解决 namespace tags 错误）
                      removeEditorsNSData: true,
                      // 清理属性（移除 xmlns:inkscape 等）
                      cleanupAttrs: true,
                    },
                  },
                },
                // 移除不必要的命名空间声明
                {
                  name: 'removeXMLNS',
                },
              ],
            },
          });
        // chain.module
        //   .rule('svgr')
        //   .test(/\.svg$/)
        //   .include.add(
        //     path.resolve(__dirname, '../src/assets/Icons')
        //   )
        //   .when(
        //     true,
        //     (rule) => {
        //       rule
        //         .loader('@svgr/webpack')
        //         .options({
        //           dimensions: false,
        //           icon: false,
        //         });
        //     }
        //   );


        // ⚡ 优化：只在生产环境编译 node_modules（开发环境跳过，提升 20-30% 构建速度）
        // 2025.12.12 这一段解决的问题是在雷神模拟器上运行android时不支持es2020语法的问题
        if (process.env.NODE_ENV === 'production') {
          chain.module
            .rule('force-es5')
            .test(/\.(js|mjs)$/)
            .include.add([
              /node_modules[\\/]ahooks/,
              /node_modules[\\/]lodash-es/,
              /node_modules[\\/]dayjs/,
              /node_modules[\\/]antd-mobile/,
              /node_modules[\\/]@ant-design/,
              /node_modules[\\/]@cornerstonejs/,
              /node_modules[\\/]react-query/,
              // ↑ 把自己项目里报错或输出 const/let 的包加进来就行
            ])
            .end()
            .use('babel-loader')
            .loader('babel-loader')
            .options({
              presets: [
                ['@babel/preset-env', {
                  targets: { chrome: '91' },    // 或者 "iOS >= 9, Android >= 5"
                  useBuiltIns: 'usage',
                  corejs: 3,
                }]
              ]
            });
        }
        // ✅ 优化：配置 Webpack 持久化缓存
        chain.cache({
          type: 'filesystem',
          cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/webpack-h5'),
          buildDependencies: {
            config: [
              __filename,
              path.resolve(__dirname, './prod.ts'),
              path.resolve(__dirname, './dev.ts'),
            ],
          },
          name: `h5-${process.env.NODE_ENV || 'development'}`,
          version: '1.0.0',
        });
        chain.output.path(path.resolve(__dirname, '../dist/h5'));
        chain.optimization.minimize(false); // 彻底关闭压缩
        // chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin, [
          {
            configFile: path.resolve(__dirname, '../tsconfig.json'), // 必须指向存在的 tsconfig
          },
        ]);
        // 打开详细日志
        //chain.mode('production').stats('verbose');
        chain.merge({
          resolve: {
            fallback: {
              util: require.resolve('util/'),
              stream: require.resolve('stream-browserify'),
              fs: require.resolve('browserify-fs'),
              path: require.resolve('path-browserify'),
            },
          },
        });
        // ✅ 优化：启用 Terser 并行处理
        chain.optimization.minimizer('terser').use(TerserPlugin, [
          {
            parallel: true, // 多线程并行，提升构建速度
            terserOptions: {
              compress: false, // 先不压缩，只混淆
              mangle: false,
              format: {
                comments: false,
              },
            },
            // eslint-disable-next-line
          } as any]);
        chain
          .plugin('define-plugin')
          // eslint-disable-next-line
          .use(DefinePlugin as any, [{
            'process.env.USE_MSW': JSON.stringify(
              process.env.USE_MSW || 'false'
            ),
            'process.env.NODE_ENV': JSON.stringify(
              process.env.NODE_ENV || 'production'
            ),
          },
          ]);
      },
    },
    rn: {
      appName: 'taroDemo',
      postcss: {
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        },
      },
    },
  };

  if (process.env.NODE_ENV === 'development') {
    // 本地开发构建配置（不混淆压缩）
    return merge({}, baseConfig, devConfig);
  }
  // 生产构建配置（默认开启压缩混淆等）
  return merge({}, baseConfig, prodConfig);
});