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

本文主要是介绍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.jslet 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端口看到打包后体积可视化的结果。

这篇关于webpack: react+umiJS框架配置打包体积可视化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---