umi优化项目打包的体积，有效的减小打包体积，

废话不多说·直接上代码

import { defineConfig, utils } from 'umi';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
import webpackPlugin from './plugin.config';

const { winPath } = utils; // preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。

const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, REACT_APP_ENV, GA_KEY } = process.env;
export default defineConfig({
    hash: true,
    antd: {},
    analytics: GA_KEY
        ? {
              ga: GA_KEY,
          }
        : false,
    dva: {
        hmr: true,
    },
    fastRefresh: {},
    locale: {
        default: 'zh-CN',
        // default true, when it is true, will use `navigator.language` overwrite default
        antd: true,
        baseNavigator: true,
    },
    dynamicImport: {
        loading: '@/components/PageLoading/index',
    },
    nodeModulesTransform: {
        type: 'none', // 提升编译速度加速，加速
    },
    targets: {
        ie: 11,
    },
    terserOptions: {
        compress: {
            drop_console: true,
            drop_debugger: true,
        },
    },
    // umi routes: https://umijs.org/docs/routing

    routes: routes,
    // Theme for antd: https://ant.design/docs/react/customize-theme-cn
    theme: {
        // ...darkTheme,
        'primary-color': defaultSettings.primaryColor,
    },
    define: {
        REACT_APP_ENV: REACT_APP_ENV || false,
        ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION:
            ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION || '', // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
    },
    ignoreMomentLocale: true,
    lessLoader: {
        javascriptEnabled: true,
    },
    cssLoader: {
        modules: {
            getLocalIdent: (context, _, 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(.*)/);

                if (match && match[1]) {
                    const antdProPath = match[1].replace('.less', '');
                    const arr = winPath(antdProPath)
                        .split('/')
                        .map((a) => a.replace(/([A-Z])/g, '-$1'))
                        .map((a) => a.toLowerCase());
                    return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
                }

                return localName;
            },
        },
    },
    manifest: {
        basePath: '/',
    },

    proxy: proxy[REACT_APP_ENV || 'dev'],
    // devServer: {
    //   host: 'http://172.21.1.183',
    //   port: '8000',
    // },
    chainWebpack: webpackPlugin,
});

来一点干货来记录一下实际项目中的一些问题，指（react）umi的项目呦，this。。。。。。。，再次楼主提示一下umi的项目已经阿里已经不在维护了，在线可能要大家一起才坑了，如果需要请留言，楼主愿意跟大家一起讨论这个umi开发中遇到的问题，逼逼叨了这么一大会，来上代码吧，集美们，

// 在config文件目录下的config.js,
// chainWebpack: webpackPlugin,这样配置webpack就🆗,


// 我这里是针对生产环境写的带代码，

webpackPlugin = (config) => {
    if (process.env.NODE_ENV === 'production') {
        config.merge({
            optimization: {
                minimize: true,
                splitChunks: {
                    chunks: 'async',
                    minSize: 20000,
                    minChunks: 2,
                    automaticNameDelimiter: '.',
                    cacheGroups: {
                        vendor: {
                            name: 'vendors',
                            test: /^.*node_modules[\\/](?!ag-grid-|wangeditor|react-virtualized|rc-select|rc-drawer|rc-time-picker|rc-tree|rc-table|rc-calendar).*$/,
                            chunks: 'all',
                            priority: 10,
                        },
                        virtualized: {
                            name: 'virtualized',
                            test: /[\\/]node_modules[\\/]react-virtualized/,
                            chunks: 'all',
                            priority: 10,
                        },
                        rcselect: {
                            name: 'rc-select',
                            test: /[\\/]node_modules[\\/]rc-select/,
                            chunks: 'all',
                            priority: 10,
                        },
                        // antd: {
                        //     name: 'antd',
                        //     test: /[\\/]node_modules[\\/]antd/,
                        //     chunks: 'all',
                        //     priority: 10,
                        // },
                        rcdrawer: {
                            name: 'rcdrawer',
                            test: /[\\/]node_modules[\\/]rc-drawer/,
                            chunks: 'all',
                            priority: 10,
                        },
                        rctimepicker: {
                            name: 'rctimepicker',
                            test: /[\\/]node_modules[\\/]rc-time-picker/,
                            chunks: 'all',
                            priority: 10,
                        },
                        ag: {
                            name: 'ag',
                            test: /[\\/]node_modules[\\/]ag-grid-/,
                            chunks: 'all',
                            priority: 10,
                        },
                        // antd: {
                        //     name: "antd",
                        //     test: /[\\/]node_modules[\\/]antd[\\/]/,
                        //     chunks: "all",
                        //     priority: 9
                        // },
                        rctree: {
                            name: 'rctree',
                            test: /[\\/]node_modules[\\/]rc-tree/,
                            chunks: 'all',
                            priority: -1,
                        },
                        rccalendar: {
                            name: 'rccalendar',
                            test: /[\\/]node_modules[\\/]rc-calendar[\\/]/,
                            chunks: 'all',
                            priority: -1,
                        },
                        rctable: {
                            name: 'rctable',
                            test: /[\\/]node_modules[\\/]rc-table[\\/]es[\\/]/,
                            chunks: 'all',
                            priority: -1,
                        },
                        wang: {
                            name: 'wang',
                            test: /[\\/]node_modules[\\/]wangeditor[\\/]/,
                            chunks: 'all',
                            priority: -1,
                        },
                        // lodash: {
                        //     name: 'lodash',
                        //     test: /[\\/]node_modules[\\/]lodash[\\/]/,
                        //     chunks: 'all',
                        //     priority: -2,
                        // },
                        bizcharts: {
                            name: 'bizcharts',
                            test: /[\\/]node_modules[\\/]bizcharts[\\/]/,
                            chunks: 'all',
                            priority: 10,
                        },
                        xlsx: {
                            name: 'xlsx',
                            test: /[\\/]node_modules[\\/]xlsx[\\/]/,
                            chunks: 'async',
                            priority: 10,
                        },
                    },
                },
            },
        });
    }
};

哈哈，被上面这段代码所震惊到了写法那是因为大佬们写的代码都不简单，哈哈, 希望小七的代码能够帮助到您，其实官方文档上面都有，但是api写的可能没有antdesignUI 写的那么的完善，毕竟开源也是需要成本的，咱们国家的程序员也是需要生活的，内部推不过去了，开源了，但是维护的成本又上去了，这样最后不能维护了，哎，但行好事，莫问前程，继续听我逼逼叨；

/**
* 在暴露的对象里面可以配置一下这个提升打包速度，加速加速
*/
    nodeModulesTransform: {
       type: 'none', // 提升编译速度加速，加速
   },

说到最后希望这篇帖子能够帮助到你，代码可以抄 ‘但是更得理解’，多敲才是王道希望你对代码有着真挚的感情，对自己敲出的代码都有不一样的自信，感谢您的浏览