vue 查看dist文件里的结构(多种方式)


Posted in Javascript onJanuary 17, 2020

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

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文件里的结构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
JavaScript数组去重实现方法小结
Jan 17 #Javascript
JS面向对象之多选框实现
Jan 17 #Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 #Javascript
JS面向对象之单选框实现
Jan 17 #Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 #Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
You might like
PHP函数常用用法小结
2010/02/08 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php发送邮件的问题详解
2015/06/22 PHP
php提高网站效率的技巧
2015/09/29 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
postman传递当前时间戳实例详解
2019/09/14 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
类和结构的区别
2012/08/15 面试题
警察思想汇报
2014/01/04 职场文书
英文导游欢迎词
2014/01/11 职场文书
整改落实自查报告
2014/11/05 职场文书
毕业生对母校寄语
2015/02/26 职场文书
校长师德表现自我评价
2015/03/04 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL