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/ 即可。