vue 查看dist文件里的结构(多种方式)
场景：优化打包后的代码，提高性能。
1.方式一：report-json。
1.1 package.json文件里加入以下命令，
"report": "vue-cli-service build --report-json"
1.2 然后控制台运行 npm run report
1.3 结果：会在dist文件夹里生成 report.json。里面有打包后每个文件的来源。
2.方式二：使用 stats-webpack-plugin 插件。
2.1 安装 npm install stats-webpack-plugin --save-dev
2.2 修改 vue.config.js 文件的 configureWebpack， 如下：
const StatsPlugin = require('stats-webpack-plugin');
module.exports = {
configureWebpack:{
plugins: [new StatsPlugin('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 安装 npm install webpack-bundle-analyzer --save-dev
3.2 修改 vue.config.js 文件里的 chainWebpack。如下：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
chainWebpack: (config) => {
config.plugin('webpack-bundle-analyzer') // 打包分析
.use(BundleAnalyzerPlugin)
.init(Plugin => new Plugin());
},
};
3.3 会自动在本地起一个服务，查看到生成文件的关系图。
4.再推荐一个网站分析的网站 https://gtmetrix.com/
总结
以上所述是小编给大家介绍的vue 查看dist文件里的结构，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
vue使用element-ui的el-input监听不了回车事件的解决方法
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧2018-01-01
本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法2017-08-08
详解vue-router的Import异步加载模块问题的解决方案
这篇文章主要介绍了详解vue-router的Import异步加载模块问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
大家在项目开发的时候,需要看看一些后端接口返回的结果,会多次使用console.log项目开发完成打包的时候,发现控制台一堆的console.log,非常头疼,下面这篇文章主要给大家介绍了关于vue项目打包清除console.log的四种方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了VUE3中的函数的声明和使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue如何处理Axios多次请求数据显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-02-02
这篇文章主要介绍了vue.js父子组件传参的原理与实现方法,结合实例形式分析了vue.js父子组件传参的基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下2023-07-07
详解vue中使用transition和animation的实例代码
这篇文章主要介绍了详解vue中使用transition和animation的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
最新评论