webpack打包可视化分析工具:webpack-bundle-analyzer

这篇具有很好参考价值的文章主要介绍了webpack打包可视化分析工具:webpack-bundle-analyzer。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在对webpack项目进行优化的时候,可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构,能快速定位需要优化的地方,对开发者非常友好

下载安装

下载依赖包

npm i webpack-bundle-analyzer

使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: 'production',
  plugins: [
    //根据个人需要,可以区分环境使用
    new BundleAnalyzerPlugin()  
    //...其他配置
    
 ]
}

效果

当你使用webpack构建完成后,就会弹出这么一个界面,能让你一目了然的掌握构建包的情况

webpack打包可视化分析工具:webpack-bundle-analyzer,webpack,webpack,前端

1.占比

图中模块面积越大,证明该文件体积在构建包中占比就越大。比如图中vendors.js就是占比最大一个包,完了是一个material.vue打包后的文件。

vendors.js中,最大的一个是element-plus,然后是echarts,等等按照图内面积进行排名

2.压缩体积效果

将鼠标悬浮于模块上,可以看到vendors最开始构建的体积是10.54MB,经过代码压缩后编程4.29MB,再经过gzip可以压缩到1.17MB

3.效果总览

webpack打包可视化分析工具:webpack-bundle-analyzer,webpack,webpack,前端

 左边可以查看具体文件的大小,具体定位所有文件是否还有可优化的空间文章来源地址https://www.toymoban.com/news/detail-791519.html

到了这里,关于webpack打包可视化分析工具:webpack-bundle-analyzer的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 数据可视化工具在成绩分析中的作用与意义

    数据可视化是将数据转化为图表、图形和可交互式界面的过程,它在成绩分析中扮演着重要的角色。通过将学生成绩数据以图形化方式展示,数据可视化工具可以帮助教育者更好地理解和解释学生的表现,发现隐藏在数据背后的模式和趋势。本文将详细介绍数据可视化工具在

    2024年02月07日
    浏览(45)
  • SpeedBI数据可视化工具:浏览器上做分析

    SpeedBI数据分析云是一种在浏览器上进行数据可视化分析的工具,它能够将数据以可视化的形式呈现出来,并支持多种数据源和图表类型。 所有操作,均在浏览器上进行 在浏览器中打开SpeedBI数据分析云官网,点击【免费使用】进入,简单的注册登录后,就可以通过点击、拖拽

    2024年02月11日
    浏览(41)
  • 利用大数据分析工具,实现多场景可视化数据管理

    https://yanhuang.yuque.com/staff-sbytbc/rb5rur? 购买服务器 购买腾讯云服务器,1300 元新人价,一年时间 ●4核16G内存 ●CentOS 6.7 (补充说明:最新的 2.7.1 GA 版本,8G 内存也是可以跑的,可以先使用8G,不够再做升级)。 安装docker环境 安装docker,速度还挺快的,大概3~5分钟内 1、注册鸿

    2024年02月14日
    浏览(56)
  • Linux DataEase数据可视化分析工具本地部署与远程访问

    DataEase 是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。 在本地搭建后,借助cpolar 内网穿透实现远程公网地址即可访问

    2024年02月05日
    浏览(53)
  • 开源数据可视化分析工具DataEase本地部署并实现远程访问

    目录 前言 1. 安装DataEase 2. 本地访问测试 3. 安装 cpolar内网穿透软件 4. 配置DataEase公网访问地址 5. 公网远程访问Data Ease 6. 固定Data Ease公网地址 结语 作者简介:  懒大王敲代码,计算机专业应届生 今天给大家聊聊开源数据可视化分析工具DataEase本地部署并实现远程访问,希望

    2024年02月03日
    浏览(43)
  • (八) ElasticSearch数据可视化和分析工具Kibana安装和使用

    Kibana 是一个用于数据可视化和分析的开源工具,它是 Elastic Stack(包括 Elasticsearch、Logstash 和 Beats)的一部分。Kibana 提供了直观、交互式的用户界面,让用户能够以图表、表格、地图等形式实时探索和可视化存储在 Elasticsearch 中的数据。 前往 Elastic 官网(https://www.elastic.co/

    2024年02月11日
    浏览(62)
  • 本地搭建Linux DataEase数据可视化分析工具并实现公网访问

    DataEase 是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。 在本地搭建后,借助cpolar 内网穿透实现远程公网地址即可访问

    2024年02月05日
    浏览(43)
  • Linux DataEase数据可视化分析工具结合cpolar实现远程访问

    DataEase 是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。 在本地搭建后,借助cpolar 内网穿透实现远程公网地址即可访问

    2024年02月08日
    浏览(56)
  • 远程访问Linux的DataEase数据可视化分析,有哪些推荐的工具?

    DataEase 是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。 在本地搭建后,借助cpolar 内网穿透实现远程公网地址即可访问

    2024年02月10日
    浏览(50)
  • 大数据可视化BI分析工具Apache Superset实现公网远程访问

    Superset是一款由中国知名科技公司开源的“现代化的企业级BI(商业智能)Web应用程序”,其通过创建和分享dashboard,为数据分析提供了轻量级的数据查询和可视化方案。Superset在数据处理和可视化方面具有强大的功能,能够满足企业级的数据分析需求,并为用户提供直观、灵

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包