vue 查看dist文件中的结构（多种方式）

场景：优化打包代码，提升性能。

1。方法一：report-json.

　　1.1 在package.json文件中添加以下命令，

“报告”：“vue-cli-service build --report-json”

　　1.2 然后在控制台运行npm run reports

　　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');

模块. 导出 = {
  配置Webpack：{
    plugins: [new StatsPlugin('stats.json', { // 查看统计信息
      块模块：true，
      块：真实，
      资产：假，
      模块：真实，
      孩子们：真的，
      块排序：true，
      资产排序： true
    })],
  },
};

　　2.3 结果：文件根目录下会生成stats.json文件

　　2.4 打开网站http://www.webguidecorpuschristi.com/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;
模块. 导出 = {
  chainWebpack：（配置）=> {
    config.plugin('webpack-bundle-analyzer') // 打包分析
      .use(BundleAnalyzerPlugin)
      .init(插件=>新插件());
  },
};

　　3.3会自动在本地启动一个服务，并查看生成文件的关系图。

4。推荐另一个网站分析网站 https://www.webguidecorpuschristi.com/

总结

以上就是小编介绍的vue dist文件中的结构。希望对您有所帮助。如果您有任何疑问，请给我留言，编辑会及时回复您。也非常感谢大家对来客网网站的支持！
如果您认为本文对您有帮助，欢迎转载，请注明出处，谢谢！