用webpack-bundle-analyzer可视化分析vue的包bundle.js文件
webpack-bundle-analyzer工具的用途是什么？官方资料解释它是这样一个工具：
Visualize size of webpack output files with an interactive zoomable treemap.
翻译为：为webpack打包输出的文件构造一个交互式可缩放的树状图。
通过这个可缩放树状图，可以直观分析打包出的文件包含哪些模块，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。
接下来我们在vue+webpack的项目内引入webpack-bundle-analyzer分析工具。
有两种安装方式：
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
我们采用npm方式安装。
然后再 webpack.config.js内 配置此工具到插件节点：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}当然，这个只是一个极简的 的配置思路，要安装你的vue项目 来具体加入这个配置。主要就是在webpack的配置文件，找到plugins节点数组位置，把这个BundleAnalyzerPlugin对象初始化好即可。
然后，用这个模块工具可以让我们掌握项目的以下信息：
1、清晰的看出项目生成的bundle.js里都用到了哪些包。
2、找出在项目中最大的包是哪个。
3、找到项目错误信息发生在哪个模块。
4、更加这些信息优化项目代码，即去掉多余的模块。
它能让webpack打包出的bundle.js文件最小化，显示出bundle.js包含的所有模块总大小以及gzip压缩打包后的总大小。毕竟bundle.js的大小自己影响浏览器下载速度，如果bundle.js太大，还需要分成多个文件，这些都能优化浏览器打开vue开发的项目速度。
对于new BundleAnalyzerPlugin(options?: object)的这个options参数，请阅读 https://www.npmjs.com/package/webpack-bundle-analyzer
获得更加多支持。
当执行 npm run build命令，即可启动 这个分析工具 并通过 http://127.0.0.1:8888 打开可视化界面；
本文全部内容结束，感谢您的阅读，希望能帮助到您。
