webpack: react+umiJS框架配置打包体积可视化

场景： 打包出来单个js文件体积过大，网页加载太慢，尤其是包含图表的页面。

---

安装umi-webpack-bundle-analyzer

关于 webpack-chain：通过 webpack-chain 的 API 扩展或修改 webpack 配置

npm install --save-dev umi-webpack-bundle-analyzer

在.umirc.js或config/config.js中 配置：

// config.js

let BundleAnalyzerPlugin = require("umi-webpack-bundle-analyzer")
.BundleAnalyzerPlugin;

const config = {
    chainWebpack: (config, { webpack }) => {
        config
          .plugin("umi-webpack-bundle-analyzer")
          .use(new BundleAnalyzerPlugin());

     }
}

运行 npm run build，会在80端口看到打包后体积可视化的结果。