cldV2react/config/config.js

// https://umijs.org/config/

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const prodGzipList = ['js', 'css']

import { defineConfig } from 'umi'
import defaultSettings from './defaultSettings'
import proxy from './proxy'
import routes from './routes'
import windicss from 'windicss-webpack-plugin/dist/index'
const { REACT_APP_ENV } = process.env
export default defineConfig({
  hash: true,
  antd: {},
  define: {
    REACT_APP_ENV: REACT_APP_ENV || false
  },
  layout: {
    // https://umijs.org/zh-CN/plugins/plugin-layout
    locale: true,
    siderWidth: 208,
    ...defaultSettings
  },
  dva: {
    hmr: true,
    disableModelsReExport: true,
    lazyLoad: true
  },
  history: {
    type: 'browser'
  },
  locale: {
    // default zh-CN
    default: 'zh-CN',
    antd: false,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: false
  },
  dynamicImport: {
    loading: '@/components/PageLoading/index'
  },
  targets: {
    ie: 11
  },
  // terserOptions: {
  //   compress: {
  //     drop_console: NODE_ENV === 'production' ? true : false,
  //     drop_debugger: NODE_ENV === 'production' ? true : false
  //   }
  // },
  // umi routes: https://umijs.org/docs/routing
  routes,
  // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  theme: {
    'primary-color': defaultSettings.primaryColor
  },
  title: false,
  ignoreMomentLocale: true,
  proxy: proxy[REACT_APP_ENV || 'dev'],
  manifest: {
    basePath: '/'
  },
  exportStatic: {},
  esbuild: {},
  fastRefresh: {},
  nodeModulesTransform: {
    type: 'none' // 提升编译速度加速，加速
  },
  extraBabelPlugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    [
      'import',
      {
        libraryName: '@icon-park/react',
        libraryDirectory: 'es/icons',
        camel2DashComponentName: false
      },
      '@icon-park/react'
    ],
    [
      'import',
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        camel2DashComponentName: false,
        style: true // 样式按需加载
      },
      '@arco-design/web-react'
    ]
  ],
  chunks: ['vendors', 'umi'],
  chainWebpack(config) {
    config.plugin('windicss').use(windicss)
    config.plugin('antd-dayjs-webpack-plugin').use(AntdDayjsWebpackPlugin)

    // if (REACT_APP_ENV === 'prod') {
    config.merge({
      optimization: {
        minimize: true,
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            react: {
              name: 'react',
              priority: 10,
              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/
            },
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource)
              },
              priority: 10
            },
            antd: {
              name: 'antd',
              test: /[\\/]node_modules[\\/]antd/,
              chunks: 'all',
              priority: 9
            },
            chart: {
              name: 'chart',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@ant-design[\\/]charts/,
              priority: 11
            },
            icons: {
              name: 'icons',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@ant-design[\\/]icons/,
              priority: 10
            },
            'pro-table': {
              name: 'pro-table',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@ant-design[\\/]pro-table/,
              priority: -1
            },
            'pro-layout': {
              name: 'pro-layout',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@ant-design[\\/]pro-layout/,
              priority: -1
            },
            'pro-form': {
              name: 'pro-form',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@ant-design[\\/]pro-form/,
              priority: 10
            },
            'icon-park': {
              name: 'icon-park',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@icon-park[\\/]react/,
              priority: 10
            },
            'arco-design': {
              name: 'arco-design',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]@arco-design[\\/]web-react/,
              priority: 11
            },
            lodash: {
              name: 'lodash',
              test: /[\\/]node_modules[\\/]lodash-es[\\/]/,
              chunks: 'all',
              priority: -2
            },
            jsdk: {
              name: 'jsdk',
              chunks: 'initial',
              test: /[\\/]node_modules[\\/](dayjs|react-copy-to-clipboard|react-infinite-scroll-component)[\\/]/,
              priority: 11
            },
            markdown: {
              name: 'markdown',
              test: /[\\/]node_modules[\\/]react-markdown/,
              priority: 12
            },
            vditor: {
              name: 'vditor',
              test: /[\\/]node_modules[\\/]vditor[\\/]/,
              priority: 12
            },
            'async-commons': {
              // 其余异步加载包
              chunks: 'async',
              minChunks: 2,
              name: 'async-commons',
              priority: 9
            },
            default: {
              name: 'default',
              minChunks: 1,
              priority: -1,
              reuseExistingChunk: true
            }
          }
        }
      }
    })
    // config.plugin('compression-webpack-plugin').use(
    //   new CompressionWebpackPlugin({
    //     // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
    //     algorithm: 'gzip', // 指定生成gzip格式
    //     test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
    //     threshold: 5000, //对超过10k的数据进行压缩
    //     minRatio: 0.6 // 压缩比例，值为0 ~ 1
    //   })
    // )
    // }
    //过滤掉momnet的那些不使用的国际化文件
    // config
    //   .plugin('replace')
    //   .use(require('webpack').ContextReplacementPlugin)
    //   .tap(() => {
    //     return [/moment[/\\]locale$/, /zh-cn/]
    //   })
  }
})