vueCl如何查看打包后文件的大小占比

cnpm install webpack-bundle-analyzer --save-dev

chainWebpack: config => {
    // 查看打包文件体积大小
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }

"build": "vue-cli-service build --report"

chainWebpack: (config) => {
   if (process.env.NODE_ENV === 'production') {  // 判断是否为是生成环境
     var externals = {
        vue: 'Vue',
        axios: 'axios',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        echarts: 'echarts'
      }
      config.externals(externals)
      const cdn = { // 从cdn中获取对象文件，减少打包体积
        css: [
          // element-ui css
          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/theme-chalk/index.css',
          // nprogress
          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css'
        ],
        js: [
          // vue
          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
          // vue-router
          'https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js',
          // vuex
          'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js',
          // axios
          'https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js',
          // element-ui js
          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/index.js',
          // echarts
          'https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js'
        ]
      }
        // 通过 html-webpack-plugin 将 cdn 注入到 index.html 之中
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn
          return args
      })
       // 添加压缩图片的方式  如果没有图片很占加载时间的话，可以省略这步
       config.module
        .rule('images')
        .test(/\.(jpg|png|gif)$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 10, // 以下配置项用于配置file-loader
          // 将图片改为cdn获取
          publicPath: 'https://oss.xx.com/img',
          // 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
          outputPath: 'img',
          // 配置打包后图片文件名
          name: '[name].[ext]'
        })
       .end()
    }
}

// 先引入方法
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
//在添加下面的方法
configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        asset: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话assets改为filename
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }

//注释掉main.js中的相关的代码
// import Vue from 'vue'
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
// 注释掉 vuex中 下面的代码
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
//注释掉 路由中 下面的代码
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)