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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
JavaScript 如何计算文本的行数的实现
Sep 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP cron中的批处理
2008/09/16 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python绘制3D图形
2018/05/03 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
班级入场式解说词
2014/02/01 职场文书
老公爱的承诺书
2014/03/31 职场文书
运动会演讲稿200字
2014/08/25 职场文书
python字符串常规操作大全
2021/05/02 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技