如何实现前端优化，如何发现哪些前端优化？

1.一幅图看出哪些需要优化！怎么做呢？

2.npm安装webpack-bundle-analyzer

npm install webpack-bundle-analyzer -D

3.配置webpack-bundle-analyzer

//在vue.config.js引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//配置
module.exports={
   configureWebpack:config=> {
    config.plugins.push(
        new BundleAnalyzerPlugin()
       ),
     }

}

4.如何使用？

通过npm run serve 跑起项目。
跑起来之后会自动跳转页面，显示各各文件占用的空间大小。
如果没有自动跳转 请手动进入地址：http://127.0.0.1:8888/   即可。