随着项目增大发现 打包后的 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并让其异步 希望能帮到你。