场景：优化打包后的代码，提高性能。
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 打开 这个网站， 打开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.再推荐一个网站分析的网站
总结
以上所述是小编给大家介绍的vue 查看dist文件里的结构，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论