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 相关文章推荐
javascript之学会吝啬 精简代码
Apr 25 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
详解vue-router导航守卫
Jan 19 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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/01/18 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
Linux中为php配置伪静态
2014/12/17 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
vue.js的安装方法
2017/05/12 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python 数据加密代码
2008/12/24 Python
Python中if __name__ == "__main__"详细解释
2014/10/21 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
PyQt5实现简易计算器
2020/05/30 Python
Python运行异常管理解决方案
2020/03/09 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
模具专业毕业生自荐书范文
2014/02/19 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
旅游安全协议书
2014/04/21 职场文书
装修施工安全责任书
2014/07/24 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
关于 Python json中load和loads区别
2021/11/07 Python