umijs 关于 vendors 压缩优化

随着项目增大发现，打包后的 vendors.async.js， 也越来越大，虽然服务器开启gzip压缩，但还是感觉让人无法接受，所以就开启了优化之旅，废话不多说直接上.umirc.js

 

// ref: https://umijs.org/config/
export default {
    // 部署到二级域名
    // base: '/xxxxxxx/',
    // publicPath: "/xxxxxxx/",
    // runtimePublicPath: true,

    // 忽略 moment 的 locale 文件，用于减少尺寸。
    ignoreMomentLocale: true,
    // 配置是否开启 treeShaking，默认关闭。
    treeShaking: true,
    // 切换 history 方式为 hash
    history: 'browser',
    // 开发时需要注释
    chainWebpack(config) {
        // 删除 打包时 进度条插件
        // config.plugins.delete('progress');
        config.merge({
            plugin: {
                install: {
                    plugin: require('uglifyjs-webpack-plugin'),
                    args: [{
                        sourceMap: false,
                        uglifyOptions: {
                            compress: {
                                // 删除所有的 `console` 语句
                                drop_console: true,
                            },
                            output: {
                                // 最紧凑的输出
                                beautify: false,
                                // 删除所有的注释
                                comments: false,
                            },
                        }
                    }]
                }
            },
            optimization: {
                minimize: true,
                splitChunks: {
                    chunks: 'async',
                    // chunks(chunk) {
                    //     // exclude `my-excluded-chunk`
                    //     return chunk.name !== 'my-excluded-chunk';
                    // },
                    minSize: 20000, //生成块的最小大小（以字节为单位）1024字节=1KB。
                    minChunks: 1,   //拆分前必须共享模块的最小块数。
                    maxInitialRequests: 30, //入口点的最大并行请求数。
                    automaticNameDelimiter: '.',
                    cacheGroups: {
                        vendor: {
                            name: 'vendors',
                            test: /^.*node_modules[\\/](?!ag-grid-|lodash|wangeditor|react-virtualized|rc-select|rc-drawer|rc-time-picker|rc-tree|rc-table|rc-calendar|echarts|echarts-gl|xlsx|@ant-design|antd|ali-oss).*$/,
                            priority: -10,
                            enforce: true,
                        },
                        virtualized: {
                            name: "virtualized",
                            test: /[\\/]node_modules[\\/]react-virtualized/,
                            priority: 10,
                        },
                        rcselect: {
                            name: "rc-select",
                            test: /[\\/]node_modules[\\/]rc-select/,
                            priority: 10,
                        },
                        rcdrawer: {
                            name: "rcdrawer",
                            test: /[\\/]node_modules[\\/]rc-drawer/,
                            priority: 10,
                        },
                        rctimepicker: {
                            name: "rctimepicker",
                            test: /[\\/]node_modules[\\/]rc-time-picker/,
                            priority: 10,
                        },
                        ag: {
                            name: "ag",
                            test: /[\\/]node_modules[\\/]ag-grid-/,
                            priority: 10
                        },
                        antd: {
                            name: "antd",
                            test: /[\\/]node_modules[\\/]antd[\\/]/,
                            priority: 9,
                        },
                        rctree: {
                            name: "rctree",
                            test: /[\\/]node_modules[\\/]rc-tree/,
                            priority: -1,
                        },
                        rccalendar: {
                            name: "rccalendar",
                            test: /[\\/]node_modules[\\/]rc-calendar[\\/]/,
                            priority: -1
                        },
                        rctable: {
                            name: "rctable",
                            test: /[\\/]node_modules[\\/]rc-table[\\/]es[\\/]/,
                            priority: -1,
                        },
                        echarts: { // 1.27MB
                            name: "echarts",
                            test: /[\\/]node_modules[\\/](echarts|echarts-gl)[\\/]/,
                            priority: 10,
                            enforce: true,
                        },
                        wang: {
                            name: "wang",
                            test: /[\\/]node_modules[\\/]wangeditor[\\/]/,
                            priority: -1,
                        },
                        lodash: {
                            name: "lodash",
                            test: /[\\/]node_modules[\\/]lodash[\\/]/,
                            priority: -2,
                        },
                        xlsx: { // 1.23MB
                            name: "xlsx",
                            test: /[\\/]node_modules[\\/]/, //放大xlsx包
                            // test: /[\\/]node_modules[\\/]xlsx[\\/]/, //缩小xlsx包
                            priority: 10,
                            enforce: true,
                            chunks: "async",
                        },
                        antdesigns: { // 702KB
                            name: "antdesigns",
                            test: /[\\/]node_modules[\\/](@ant-design|antd|antd-mobile)[\\/]/,
                            priority: 10,
                            enforce: true,
                        },
                        alioss: { // 427KB
                            name: "ali-oss",
                            test: /[\\/]node_modules[\\/]ali-oss[\\/]/,
                            priority: 10,
                            enforce: true,
                        }
                    }
                }
            },
            // 代理
            // "proxy": {
            //     "/api": {
            //       "target": "http://jsonplaceholder.typicode.com/",
            //       "changeOrigin": true,
            //       "pathRewrite": { "^/api" : "" }
            //     }
            //   }
        });
        // 过滤掉moment的那些不使用的国际化文件，过滤后打包出来的vendors.xxx.async.js可以减少290KB
        config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => {
            return [/moment[/\\]locale$/, /zh-cn|en-us/];
        });
    },
    plugins: [
        // ref: https://umijs.org/plugin/umi-plugin-react.html
        ['umi-plugin-react', {
            antd: false,
            dva: false,
            dynamicImport: {
                webpackChunkName: true,
                loadingComponent: './components/Loading/index',
            },
            title: 'onesightPC',
            dll: false,
            locale: {
                enable: false,
                default: 'zh-CN',
                baseNavigator: false,
            },
            routes: {
                exclude: [
                    /models\//,
                    /services\//,
                    /model\.(t|j)sx?$/,
                    /service\.(t|j)sx?$/,
                    /components\//,
                ],
            },
        }]
    ],
    // 兼容 ie11
    targets: {
        ie: 9
    },
    // 部署到任意路径
    // exportStatic:{
    //     htmlSuffix:true,
    //     dynamicRoot:true,
    // },
    // 处理 sass
    cssLoaderOptions: {
        localIdentName: '[local]'
    },
    // 路由
    routes: [
        {
            path: '/login/:type?',
            component: './Login/Longin'
        },
        {
            path: '/',
            component: '../layouts/index',
            routes: [{
                path: '/',
                redirect: '/control',
            }, {
                path: '/control/:details?/:type?',
                component: './Control/Control',
            }, {
                path: '*',
                component: './404'
            }]
        },
        {
            path: '*',
            component: './404'
        }
    ],
    // 处理浏览器缓存问题 开启 hash 文件后缀
    hash: true,
}

主要优化部分在  chainWebpack ，因为有些需要取舍，为了减小vendors.async.js，我放大了xlsx并让其异步，希望能帮到你。