java代码里.dist是什么意思_vue 查看dist文件里的结构

java代码里.dist是什么意思_vue 查看dist文件里的结构场景:优化打包后的代码,提高性能。1.方式一:report-json。1.1package.json文件里加入以下命令,”report”:”vue-cli-servicebuildreport-json”1.2然后控制台运行npmrunreport1.3结果:会在dist文件夹里生成report.json。里面有打包后每个文件的来源。2.方式二:使用stats-webpa…

场景:优化打包后的代码,提高性能。

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=> newPlugin());

},};

3.3 会自动在本地起一个服务,查看到生成文件的关系图。

今天的文章java代码里.dist是什么意思_vue 查看dist文件里的结构分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/7609.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注