Vue项目性能分析工具--webpack-bundle-analyzer

在优化项目的时候，每次打包后只知道包文件大，却不知道那个文件大，那个文件还有优化的空间，所以，推荐一款工具，只要在项目中安装配置一下，便可以一目了然的呈现出打包后资源所占的比例，接下来上教程：

我的项目是基于Vue-Cli4.0的，不同版本对应不同的配置文件呦；

1、安装webpack-bundle-analyzer

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

2、在Vue.config.js文件中配置：

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

configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
}

3、在控制台上输入命令进行打包：

npm run build:prod --report

4、在启动的时候，控制台会有提示，只要按照提示访问： 127.0.0.1:8888，就可以看到项目分析的内容了。如图：

 

 好啦，分享结束，希望对你们有所帮助！