使用webpack-bundle-analyzer分析webpack包

webpack-bundle-analyzer主要用于分析webpack打包后各个模块的体积

项目是使用vue-cli 的 webpack-template 为基础模板构建的

1. 下载webpack-bundle-analyzer

npm intall webpack-bundle-analyzer –save-dev

2. 在webpack.config.prod.js加人

if (config.build.bundleAnalyzerReport) {
     
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

3. package.json文件加入

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

4. 补充

在 config/index.js 文件中：配置了 build 对象的 bundleAnalyzerReport

在这里主要用于判断是否加入webpack-bundle-analyzer，也可以直接加入webpackConfig.plugin，npm run build也可以直接使用analyzer

module.exports = {
     
  build: {
     
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

cross-env

它是运行跨平台设置和使用环境变量(Node中的环境变量)的脚本。
由于windows不支持NODE_ENV=development的设置方式，使用cross-env 能够提供一个设置环境变量的scripts，这样我们就能够以unix方式设置环境变量，在windows上也能够兼容的。

 // windows需要下载cross-env
 npm i cross-env -S
 // 在 NODE_ENV=production 加上 cross-env