vue - vue使用webpack-bundle-analyzer进行代码打包的可视化数据分析

vue使用webpack-bundle-analyzer插件可以明确的看出每个文件模块的大小；常用来分析打包文件，优化代码等操作；

安装使用之后的效果如下：启动或打包项目，自动会在浏览器打开这个页面;

可以看出：右上角最蓝色的部分占用的空间也是比较大的，因为用到了echarts的各省的地图数据；
除了图片右下角“FoamTree”> logo之外都是应用的代码，与此同时，所有用了node_modules资源的部分都以"_vendor.js" 结尾;

1、安装

npm i webpack-bundle-analyzer -D

2，使用

修改vue.config.js文件,在configureWebpack配置模块中添加：config.plugins.push(new BundleAnalyzerPlugin());

/* 先引入打包分析插件 */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// 开始配置
module.exports = {
 /* webpack相关配置   *该对象将会被 webpack-merge 合并入最终的 webpack 配置   */
  configureWebpack: (config) => {
    config.plugins.push(new BundleAnalyzerPlugin());
 }
}

配置完成之后，启动或打包项目，自动会在浏览器打开这个页面；