vue 查看dist文件里的结构(多种方式)
场景：优化打包后的代码，提高性能。
1.方式一：report-json。
1.1package.json文件里加入以下命令，
"report":"vue-cli-servicebuild--report-json"
1.2然后控制台运行npmrunreport
1.3结果：会在dist文件夹里生成report.json。里面有打包后每个文件的来源。
2.方式二：使用stats-webpack-plugin插件。
2.1 安装npminstallstats-webpack-plugin --save-dev
2.2修改vue.config.js文件的configureWebpack，如下：
constStatsPlugin=require('stats-webpack-plugin');
module.exports={
configureWebpack:{
plugins:[newStatsPlugin('stats.json',{//查看stats
chunkModules:true,
chunks:true,
assets:false,
modules:true,
children:true,
chunksSort:true,
assetsSort:true
})],
},
};
2.3结果：会在文件根目录生成一个stats.json文件
2.4打开http://alexkuz.github.io/webpack-chart/ 这个网站，打开2.3步骤里生成的stats.json。例如：
3.方式三：使用webpack-bundle-analyzer
3.1安装npminstallwebpack-bundle-analyzer--save-dev
3.2修改vue.config.js文件里的chainWebpack。如下：
constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports={
chainWebpack:(config)=>{
config.plugin('webpack-bundle-analyzer')//打包分析
.use(BundleAnalyzerPlugin)
.init(Plugin=>newPlugin());
},
};
3.3会自动在本地起一个服务，查看到生成文件的关系图。
4.再推荐一个网站分析的网站https://gtmetrix.com/
总结
以上所述是小编给大家介绍的vue查看dist文件里的结构，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。