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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
input按钮的事件处理大全
Dec 10 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 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简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP基本语法总结
2014/09/06 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
详解React 元素渲染
2020/07/07 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
QML实现钟表效果
2020/06/02 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
实习老师离校感言
2014/02/03 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
公司经营目标责任书
2015/01/29 职场文书
酒店工程部岗位职责
2015/02/12 职场文书