一、webpack-bundle-analyzer 是什么？
webpack-bundle-analyzer 是 webpack 的插件，需要配合 webpack 和 webpack-cli 一起使用。这个插件可以读取输出文件夹（通常是 dist）中的 stats.json 文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。
二、安装
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
三、使用方法
- 作为插件使用
- 配置 webpack.config.js 文件：
// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
plugins: [
new BundleAnalyzerPlugin() // 使用默认配置
// 默认配置的具体配置项
// new BundleAnalyzerPlugin({
// analyzerMode: 'server',
// analyzerHost: '127.0.0.1',
// analyzerPort: '8888',
// reportFilename: 'report.html',
// defaultSizes: 'parsed',
// openAnalyzer: true,
// generateStatsFile: false,
// statsFilename: 'stats.json',
// statsOptions: null,
// excludeAssets: null,
// logLevel: info
// })
]
}
-
- 配置 package.json 文件
{
"scripts": {
"dev": "webpack --config webpack.dev.js --progress"
}
}
-
- 在命令行工具中输入
npm run dev
按回车。此时会打开浏览器，你将看到项目资源包的交互式可视化树形分析图。
图中占面积越大的文件，其文件的大小越大，部署到服务器之后，在浏览器中加载的时间越长，点击左上角的像箭头一样的符号可以直接查看各个文件的大小。
该分析图可以帮助我们：
了解 bundle 包中的真正内容
找出哪些模块尺寸最大
查找误引入的模块
优化项目
最棒的是它支持缩小的 bundle 文件，它解析它们以获得 bundle 文件模块的实际大小，还显示了它们的压缩大小。
得到可视化的分析结果之后，接下来就对占比比较大或者依赖程度比较高的文件进行优化了。
最后安利几个网站：
开发者搜索：kaifa.baidu.com/searchPage
浏览器插件Wetab： juejin.cn/post/724938…
文档AI自动生成： www.duomosmart.com/login?invit…
chatppt: chat-ppt.com/
