【前端】探索webpack3项目build速度优化, 优化个p

news2024/11/13 10:51:40

文章目录

    • 背景
    • uglifyjs-webpack-plugin
    • webpack3 压缩混淆js 优化踩坑。
    • 结论

背景

webpack3 + babel7 + uglifyjs-webpack-plugin的项目,build起来是什么体验。 大抵是写了两个月后,发现build时间从120s激增到400s。而这400秒中,有50多秒是UglifyJsPlugin贡献的。(更耗时的其实是babel-loader,但是咱拿他没办法)

uglifyjs-webpack-plugin

这玩意儿是什么呢,其实就是对js进行压缩和混淆的插件(包含去除未使用用变量, 去除console, 去除debugger等),使用nodejs编写,常用于webpack3中。而在webpack4-5中,已经弃用了,替代品叫做terser-webpack-plugin, 可能快一丢丢。

然后,目前追求更进一步的性能提升,那就是用编译性语言替代nodejs来对js压缩混淆。

常见的有

  • go语言esbuild: 用于webpack5中的esbuild-webpack-plugin以及vite。
  • rust语言swc: 忘了,似乎用于 umi@4
  • rust语言rsbuild: 字节整的,用于平滑替换webpack5生态。好像兼容了90%的插件,目前似乎0.7.8版本。
    这几个的问题在于,最低只能编译到es2015,也就是不支持ie全系列。无法避免ie的话,还是老老实实babel-loader吧
    在这里插入图片描述

webpack3 压缩混淆js 优化踩坑。

  • webpack-parallel-uglify-plugin@1: 毫无用处,负优化。
  • happypack: 毫无用处,负优化。
  • 别的似乎没什么优化方案了。

结论

别优化了,又不是不能用。

  • 从webpack3提取pubic和src,丢到webpack5 +rsbuild打包
  • 从360s -> 20s… emm不得不说真是绝活。
    在这里插入图片描述

再看看webpack3的,真是我测。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2119303.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

批量创建文件夹和文件——excel VBA实现

当需要创建大量文件夹及文件时,可借助excel vba 实现,如下图: 批量创建文件名为1-10的文件夹,每个文件夹内有个与文件名相同的txt文件,txt文件内的数字也跟文件名相同。 附代码: Sub CreateFoldersAndFile…

iphone13 不升级IOS使用广电卡

iPhone13的信号📶,15系统刷高版本iPCC,本帖以后不再更新!!! 自从知道可以通过刷iPCC的方式改善信号(不更新iOS大版本的情况下),尝试了各种版本。 我自己用下来总结 - 移动联通48、49、50 &…

62.以太网数据回环实验(5)

(1)UDP顶层模块代码: module udp (input wire gmii_txc ,input wire gmii_rxc ,input wire reset_n ,input wire gmii_rx_dv ,input wi…

使用FastJson2将对象转成JSON字符串时,小数转换出错

maven坐标 <dependency> <groupId>com.alibaba.fastjson2</groupId> <artifactId>fastjson2</artifactId> <version>2.0.40</version> </dependency> 问题现象&#xff1a; 问题原因&#xff1a; IOUtils.write…

RabbitMQ 高级特性——消息确认

文章目录 前言消息确认机制SpringBoot 实现消息确认NONEAUTOMANUAL 前言 前面我们学习了 SpringBoot 整合 RabbitMQ&#xff0c;并且使用 RabbitMQ 实现了几种工作模式&#xff0c;接下来我们将学习关于 RabbitMQ 的高级特性——消息确认机制&#xff0c;持久化和发送方确认。…

99.WEB渗透测试-信息收集-网络空间搜索引擎shodan(1)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;98.WEB渗透测试-信息收集-Google语法&#xff08;12&#xff09; 信息收集方向-网络空间…

探索全球实时云渲染与XR技术的多平台兼容性:谁是行业引领者?

在扩展现实&#xff08;XR&#xff09;技术与实时云渲染技术的飞速发展中&#xff0c;多平台兼容性已经成为行业技术竞争的关键要素。能够在不同的平台和设备上高效运行的解决方案&#xff0c;不仅关系到开发效率和场景多样性&#xff0c;还直接影响到用户体验和市场占有率。Pa…

续航和性能好的随身WiFi怎么选?一篇文章告诉你哪个随身WiFi值得买,格行vs华为vs中兴vs飞猫vs闪鱼

各大购物平台的大促已经开始&#xff0c;还在纠结入手哪个随身WiFi的小伙伴&#xff0c;小编今天用一篇文章告诉你哪款随身WiFi值得买 一、格行&#xff1a;成立于2009年&#xff0c;有15年的行业经验&#xff0c;是随身WiFi、物联网行业的巨头&#xff0c;销量持续保持领先&am…

活用c4d官方开发文档查询代码

当你问AI助手比如豆包&#xff0c;如何用python禁止掉xpresso标签时候&#xff0c;它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

码上进阶_刷题模块测试_用例设计

码上进阶_刷题模块测试_用例设计 系统概述&#xff1a; 码上进阶是为程序员专门打造的交流平台&#xff0c;采用主流的微服务框架和C端技术栈作为技术基础。在这个平台上&#xff0c;程序员 可以通过刷题、练习和模拟面试来提升自己的面试能力。 功能测试&#xff1a; 登录…

机器人领域超重量奖项TRO傅京孙最佳论文奖汇总【上】

更多优质内容&#xff0c;请关注公众号&#xff1a;智驾机器人技术前线 简介 IEEE Transactions on Robotics King-Sun Fu Memorial Best Paper Award这个奖项是为了表彰每年在《IEEE Transactions on Robotics》上发表的最佳论文。 以下是该奖项的一些信息&#xff1a; 奖项…

2025通信硕士找工作纪实

通信算法工程师秋招基本情况 读博难 国内读博难&#xff1a;华五以上&#xff0c;信息与通信工程专业&#xff0c;基本无普博hc&#xff0c;都是直博。偶尔有一些招普博的老师&#xff0c;是许久不科研&#xff0c;或者来了都去做横向。唯一可能的普博机会&#xff0c;是找刚入…

1.1 半导体基础知识

文章目录 半导体的特点本征半导体本征激发 杂质半导体N型半导体&#xff08;电子型&#xff09;电离施主杂质&#xff1a;多子少子 P型半导体&#xff08;空穴型&#xff09;电离受主杂质&#xff1a;多子少子 杂质半导体的示意图 PN结1、 PN 结中载流子的运动&#xff08;1&am…

苏茵茵:以时尚之名,诠释品质生活

在女性追求个性化与自我表达的今天&#xff0c;时尚早已超越了简单的穿着打扮&#xff0c;它成为女性展现自我风格、彰显独特魅力的重要方式。从广泛的兴趣爱好到精心雕琢的个人风格&#xff0c;每一处细节都闪耀着女性对个性独特与自我表达的深切渴望。正是这股不可阻挡的潮流…

《深度学习》OpenCV 模版匹配多个对象、图片旋转 综合应用

目录 一、模板匹配 1、什么是模版匹配 2、原理 3、应用领域 4、案例实现 1&#xff09;模版图片和输入图片信息 2&#xff09;代码实现 运行结果&#xff1a; 二、图像旋转 1、使用numpy方法 运行结果&#xff1a; &#xff08;图片来源网络&#xff0c;如有侵权敬…

ORBSLAM2三维重建后上下颠倒

调整 Z 坐标的符号&#xff0c;将d改为-d 引用文献 https://blog.csdn.net/qq_42450767/article/details/114144439

【技术调研】三维(1)-ThreeJs-基础常识及第一个程序

前言 ​ 公司有网页三维以及客户端、vr三维相关项目机会,需要对相关技术进行调研,进行项目可行性评估和大致成本评估。基于此对三维一些内容进行调研。 什么是three.js ​ Three.js是一款基于原生WebGL封装通用Web 3D引擎。由于前文已经了解过webGL,知道通过webGL的API我…

人工智能技术导论——基于产生式规则的机器推理

在引出本章的内容之前先介绍一个概念 知识 知识的概念 知识&#xff08;Knowledge&#xff09;是人们在改造客观世界的实践中形成的对客观事物&#xff08;包括自然的和人造的&#xff09;及其规律的认识&#xff0c;包括对事物的现象、本质、状态、关系、联系和运动等的认识…

大数据技术体系架构

数据源 社交媒体平台 云平台 网站资源 物联网&#xff08;IOT&#xff09; 数据库 特点 分布式 数据源一般分布在不同的设备上&#xff0c;这些设备通常由网络连接在一起&#xff0c;网络空间的安全及其重要&#xff1b; 异构性 数据的来源广泛&#xff0c;比如社交媒…

Qt常用控件——QRadioButton和QCheckBox

文章目录 QRadioButtonQAbstractButton信号实现简单的点餐页面QCheckBox QRadioButton QRadioButton是单选按钮&#xff0c;可以让我们在多个选项当中选择一个 作为QAbstractButton和QWidget的子类&#xff0c;它们的属性和语法&#xff0c;对于QRadioButton同样适用 QAbstrac…