webpack-bundle-analyzer

情景一

先增加依赖

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

配置文件 vue.config.js 增加 configureWebpack.plugins 参数

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      // 依赖大小分析工具
      new BundleAnalyzerPlugin(),
    ]
  },
  
  
  ...
}

 启动 cli 的 build 命令进行项目编译，编译完成时，会自动运行一个 http://localhost:8888 的地址，完整显示了支持库依赖

npm run build

 

情景二

 安装webpack-bundle-analyzer

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

 解决 'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件 的报错

npm install cross-env –save -dev 

配置文件 webpack.base.conf.js 增加 plugins 参数

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// webpack.base.conf.js
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
});

配置文件package.json文件中加入scripts

"scripts": {
    "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  }

启动 

npm run analyz