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

文章目录

    • 背景
    • 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.rhkb.cn/news/420330.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

江协科技STM32学习- P11 中断系统,EXTI外部中断

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

Pygame中Sprite类实现多帧动画3-3

4 使用自定义类MySprite 使用自定义类MySprite实现多帧动画的步骤是首先创建MySprite类的实例,之后使用相关函数对该实例进行操作。 4.1 创建MySprite类的实例 创建MySprite类的实例的代码如图12所示。 图12 创建MySprite类的实例的代码 其中,变量dr…

Dagger:Android 和 Java 的快速依赖注入框架

在软件开发中,依赖注入(DI)是一种设计模式,用于实现控制反转,减少代码耦合,提高模块化。Dagger 是一个由 Google 开发的依赖注入库,专门用于 Android 和 Java 应用程序,以其快速和高…

TiDB-从0到1【完结】

来来回回3个月,TiDB-从0到1系列就此完结。 如果各位读者有时间整个系列阅读并根据内容掌握实操的话,最次也有中级TiDB工程师的水准了。 TiDB-从0到1-体系结构 TiDB-从0到1-分布式存储 TiDB-从0到1-分布式事务 TiDB-从0到1-MVCC TiDB-从0到1-部署篇 TiDB…

通信工程学习:什么是IFMP(Ipsilon流管理协议)

IFMP:Ipsilon流管理协议 IFMP(Ipsilon Flow Management Protocol),即Ipsilon流量管理协议,是一种用于网络流量管理的协议。它主要用于IP交换机、IP交换网关或IP主机中,通过控制数据传送,将现有网…

Java代码审计篇 | ofcms系统审计思路讲解 - 篇1 | 环境搭建、路由机制

文章目录 Java代码审计篇 | ofcms系统审计思路讲解 - 篇1 | 环境搭建、路由机制1. 前言2. 项目环境搭建3. 项目路由机制3.1. 1)先搜索pom.xml文件,看看使用了什么框架3.2. 2)确定是否是spring的路由机制3.3. 3)确定自写路由机制的…

Chapter 14 计算机网络基本概述

欢迎大家订阅【Vue2Vue3】入门到实践 专栏,开启你的 Vue 学习之旅! 文章目录 前言一、网络的基本概念二、集线器、交换机和路由器三、互连网与互联网四、网络的类型五、互连网的组成1. 边缘部分2. 核心部分 六、网络协议 前言 计算机网络是现代信息社会…

【每日一题】LeetCode 104.二叉树的最大深度(树、深度优先搜索、广度优先搜索、二叉树)

【每日一题】LeetCode 104.二叉树的最大深度(树、深度优先搜索、广度优先搜索、二叉树) 题目描述 给定一个二叉树 root,我们需要计算并返回该二叉树的最大深度。二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数。 思路分…

极米科技:走出舒适圈,推动数据架构现代化升级 | OceanBase 《DB大咖说》

《DB 大咖说》第 13 期,邀请到了极米科技软件与创新产品线高级架构师施刘凡来进行分享。 在小红书平台上,“是否应将家里的电视升级为投影仪?”这一话题激发了上百万篇笔记的分享与推荐,反映出年轻群体对投影仪的偏好。随着手机、…

ESP32 UDP 05

1.在上一文章基础上修改,文章网址 ESP32-Ethernet-04-CSDN博客 2.基本代码 /* Ethernet Basic ExampleThis example code is in the Public Domain (or CC0 licensed, at your option.)Unless required by applicable law or agreed to in writing, thissoftware…

Apple Intelligence深夜炸场!苹果发布4颗自研芯片,iPhone/iWatch/AirPods大升级

今年 6 月,苹果在 WWDC 上正式推出 Apple Intelligence。消息发布次日,苹果股价在盘中突破 200 美元大关,创 2022 年 11 月 10 日以来最大涨幅,截至收盘,苹果总市值升至 3.18 万亿美元(约合人民币 23 万亿&…

通信工程学习:什么是IP-CAN(IP连接接入网)

IP-CAN:IP连接接入网 IP-CAN(IP连接接入网)是一个通过IP实现用户设备(UE)与IP多媒体子系统(IMS)实体之间连通的网络实体和接口的集合。以下是对IP-CAN的详细解释: 一、定义与概述 1…

深度学习实战87-高中数学自适应测试系统研究与应用研发,前后台页面设计

大家好,我是微学AI ,今天给大家介绍一下深度学习实战87-高中数学自适应测试系统研究与应用研发,前后台页面设计。高中数学自适应测试系统旨在通过精准评估学生能力,用最少的题目发现其薄弱环节,并提供定制化的学习计划,帮助学生快速提升成绩。同时,系统结合了AI大模型实现…

WinCC 中对 VBS 进行单步执行调试

以前应该写过文章给各位展示如何在WinCC 中通过自身控件对脚本(C、VBS)进行脚本诊断和排错。但是也有用户反馈说在编写了一些相对复杂的脚本后,WinCC自身控件无法做到单步调试,也会影响脚本的诊断调试效率。如果能够对WinCC 中的脚…

在Linux中从视频流截取图片帧(ffmpeg )

Linux依赖说明: 说明: 使用到的 依赖包 1. ffmpegsudo apt update sudo apt-get install ffmpeg2. imagemagick (选装) (检测图像边缘信息推断清晰度,如果是简单截取但个图像帧>用不到<)sudo apt-get install imagemagick备注: 指令及相关参数说明核心指令: (作用: 执…

WRF-LES与PALM微尺度气象大涡模拟、PALM静态数据预备、PALM驱动数据预报、PALM模拟

查看原文>>>WRF-LES与PALM微尺度气象大涡模拟及ChatGPT在大气科学领域应用 针对微尺度气象的复杂性&#xff0c;大涡模拟&#xff08;LES&#xff09;提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟&#xff0c;这些过程往往与天气…

Parsec无法使用、访问、连接、被墙、被封、800报错解决方案 完美平替软件

最近Parsec出现无法使用、报错等问题&#xff0c;话不多说先上解决办法 方案一&#xff1a;在%appdata%/Parsec/config.txt中&#xff0c;添加代理 app_proxy_address 127.0.0.1 app_proxy_scheme http app_proxy true app_proxy_port 你的http代理端口 方案二&#xff1a;…

计算机网络 第2章 物理层

文章目录 通信基础基本概念信道的极限容量编码与调制常用的编码方法常用的调制方法 传输介质双绞线同轴电缆光纤以太网对有限传输介质的命名规则无线传输介质物理层接口的特性 物理层设备中继器集线器一些特性 物理层任务&#xff1a;实现相邻节点之间比特&#xff08;0或1&…

嘿嘿 解决了Dev C++ 中文乱码(有效版)

这是博主第一篇博客&#xff01;记录一下博主的小小小小解决史&#xff01; 很早就下载用了Dev c &#xff0c;但现在隔了很长时间没去用过了再次打开发现出现中文乱码的现象&#xff01;在网站上翻阅了许久&#xff01;终于解决了问题&#xff01;困扰了许久&#xff01; ——…

Java easypoi导出word表格显示

1.成品 2.依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.1</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi…