vue.config.js webpack-bundle-analyzer 可视化打包分析

webpack-bundle-analyzer是一款基于webpack的可视化打包工具，通过配置可以在开发以及生产环境看到项目中引入的各模块的体积大小,方便开发者自定义的去优化包的大小。

vue-cli 中使用

  const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  },

执行命令

npm run build

可视化页面如下

是各个模块的打包后体积，可见各个模块初始化的打包体积以及Gzipped压缩后的大小。后续会使用该功能进行优化后的项目资源大小比较。