webpack打包体积优化---插件 webpack-bundle-analyzer

利用webpack-bundle-analyzer打包文件分析工具来进一步优化项目：

一丶安装：

npm install --save-dev webpack-bundle-analyzer // 安装webpack-bundle-analyzer
npm install cross-env –save -dev // 解决 ‘NODE_ENV’ 报错

二丶配置：

webpack的config中：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "server",
      analyzerHost: "127.0.0.1",
      analyzerPort: 8881, // 运行后的端口号
      reportFilename: "report.html",
      defaultSizes: "parsed",
      openAnalyzer: true,
      generateStatsFile: false,
      statsFilename: "stats.json",
      statsOptions: null,
      logLevel: "info"
    })
  ]

package.json中添加 analyz 命令：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "node build/test.js",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  },

三丶启动项目： 端口号占用会报错