很多程序猿只知道用 webpack 打包,却不知道每个文件具体打包了哪些东西,本篇文章就是介绍一个 webpack 可视化工具 webpack-bundle-analyzer ,将捆绑内容表示为方便的交互式可缩放树形图,让你明白你所构建包中真正引入的内容,我们可以借助她,发现它大体有哪些模块组成,找到不合时宜的存在,然后优化它。效果如下图:
插件功能:
每个文件包含的所有模块及其所占大小
找出错误模块
缩小捆绑
安装:
npm install --save-dev webpack-bundle-analyzer
在webpack.config.js中添加:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }
在 package.json 中添加:
"analyze": "NODE_ENV=production npm_config_report=true npm run build"
启动服务:
生产环境查看:npm run build --report 或 正常build 即可启动查看器
开发环境查看:webpack -p --progress 或启动正常devServer服务即可启动查看器!
显示:
然后默认打开一个 http://127.0.0.1:8888/ 的网站。
还没有评论,来说两句吧...