vue框架下webpack-bundle-analyzer如何分析（二）

当一个项目开发完成的时候，需要提交到生产环境，但是提交之前我们得想一想，这个项目打包之后是不是体积挺大的？打包的结果依赖包都分别占了多大的体积？如何去分析更好的指导我们去优化？此篇博客针对的是vue框架

用到了一个插件，叫作webpack-bundle-analyzer，官网地址：https://github.com/webpack-contrib/webpack-bundle-analyzer

安装方式：

npm install --save-dev webpack-bundle-analyzer

在vue.config.js下进行配置：添加如下代码

chainWebpack: config => {
    if(process.env.analyzer)
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }

在package.json中加上这句话：

 "analyzer": "set analyzer=true && vue-cli-service build "

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyzer": "set analyzer=true && vue-cli-service build "
  },

启动命令：

npm run analyzer

分析界面如下图所示：

打包生成的map文件是不会在这里边进行显示的，下图是我电脑中生成的所有文件，可以看到，map文件没有显示

该如何看这个分析图：

总结一下，通过这个分析工具，我们可以获取到的信息有：
js文件打包生成的数量，总的大小以及每个js文件的大小，有哪些东西构成。