一个项目打包之后发现包非常的大，达到了惊人的10MB，别人打包都是几百K、2，3MB的体积，我的项目有问题！！！
查看每一个打包之后的文件，发现了俩毒瘤：umi.xxxxx.js和vendors.xxxxx.async.js
它们俩竟然超过了7MB，为什么呢？
运行umi自带的包模块结构分析工具analyze，查看项目每个模块的大小
命令yarn analyze或npm run analyze
analyze介绍请查看umi官网
运行之后会看到如下一个界面，很直观：包越大比例越大
比如我这里就能看到有3个很大的包：BizCharts.js和xlsx.js和antd中的BizCharts.js
其他的相对来说还算是正常
左侧面板能够进行筛选你要查看的包
可以看到这俩兄弟在这里
简单介绍一下上面3中size：
Stat：压缩转换之前的文件大小Parsed：最终输出的尺寸大小（我们真正的就是看这个）Gzip：经过gzip压缩之后的大小通过umi的webpack-chain的API修改webpack配置进行处理：chainWebpack
umi文件位置如图 我的代码配置如下
chainWebpack(config){ config.merge({ optimization: { minimize: true, splitChunks: { chunks: 'async', minSize: 30000, minChunks: 2, 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|antd).*$/, 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 }, 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 } } } } }); //过滤掉momnet的那些不使用的国际化文件 config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => { return [/moment[/\\]locale$/, /zh-cn/]; }); }关于这些配置项的描述，可以参考这篇文章或者这篇文章
之前打包：5.7MB 现在打包：3.8MB 减少了近2MB，效果挺好的
项目安装plugin依赖
yarn add compression-webpack-plugin -D
在config/config.js目录下进行配置
const CompressionWebpackPlugin = require('compression-webpack-plugin'); const prodGzipList = ['js', 'css']; chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // 生产模式开启 config.plugin('compression-webpack-plugin').use( new CompressionWebpackPlugin({ // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称 algorithm: 'gzip', // 指定生成gzip格式 test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩 threshold: 10240, //对超过10k的数据进行压缩 minRatio: 0.6 // 压缩比例，值为0 ~ 1 }) ); } }进行打包
yarn build
打包之后可以发现dist目录下会出现压缩之后的文件
注意：不是将整个dist进行打包了，而是将每一个dist中的文件打包了，所以文件数量变成了原来的两倍
部署 我们项目使用的服务器是nginx 这个时候如果去访问的话，会发现拿到的还是没有经过压缩的版本，需要先到nginx的配置文件下添加一行配置，配置完了后悔自动寻找压缩过的资源。
gzip_static on;
访问之后能够发现已经是压缩之后的版本了，成功。
关于使用宝塔进行部署项目的点击这里
