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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
详解jQuery事件
Jan 13 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
vue语法自动转typescript(解放双手)
Sep 18 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/09/04 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
PHP new static 和 new self详解
2017/02/19 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python读写Excel文件的实例
2013/11/01 Python
python字符类型的一些方法小结
2016/05/16 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python实现识别手写数字大纲
2018/01/29 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python实战之制作天气查询软件
2019/05/14 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Django用户认证系统 User对象解析
2019/08/02 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
电气专业应届生求职信
2013/11/01 职场文书
美术教师岗位职责
2014/03/18 职场文书
协议书的格式
2014/04/23 职场文书
林肯就职演讲稿
2014/05/19 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python