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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
js中function()使用方法
Dec 24 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
p5.js实现简单货车运动动画
Oct 23 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 数组和字符串互相转换实现方法
2013/03/26 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
Go 语言结构实例分析
2021/07/04 Golang
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers