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 相关文章推荐
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
AngularJS Controller作用域
Jan 09 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JavaScript WeakMap使用详解
Feb 05 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
解决GD中文乱码问题
2007/02/14 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jQuery基础知识小结
2014/12/22 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
python 同时运行多个程序的实例
2019/01/07 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python面向对象封装操作案例详解
2019/12/31 Python
利用python生成照片墙的示例代码
2020/04/09 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
什么是抽象
2015/12/13 面试题
营销团队口号
2014/06/06 职场文书
片区教研活动总结
2014/07/02 职场文书
考勤制度通知
2015/04/25 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python