vue项目中webpack打包性能分析

vue-cli项目中集成了webpack-bundle-analyzer插件，可以直接运行以下命令进行可视化显示分析

npm run build --report

访问http://localhost:8888/即可查看，如下图所示：

webpack-bundle-analyzer

初此之外,使用webpack的以下命令即可以生成一个.json的分析文件

webpack --profile --json > stats.json

webpack.base.conf.js中的plugins数组中加入如下代码：

  plugins: [
   ...
    function() {
      this.plugin('done', function(statsData) {
        const stats = statsData.toJson();
        const fs = require('fs');
        fs.writeFileSync(path.join(__dirname, 'stats.json'), JSON.stringify(stats));
      });
    }
  ]

然后访问http://webpack.github.io/analyse/，上传stats.json文档

image.png

image.png

在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息