webpack打包优化策略
1. 减少打包体积
减少打包文件的大小是为了提高加载速度,降低网络带宽消耗,提升用户体验。常见的减少打包体积的优化策略包括:
-
代码分割(Code Splitting):将代码拆分成多个小文件,让浏览器按需加载。常见方法包括:入口分割、动态导入、异步加载。
-
项目分包:在路由里面使用懒加载,将页面打包成多个包
-
树摇(Tree Shaking):去除没有使用的代码,减少无用代码的引入和打包,特别适用于 ES6 模块。
-
压缩(Minification):通过压缩 JavaScript、CSS 等资源,去除空格、注释、换行等无用字符,减少文件大小。
-
使用
TerserPlugin压缩 JS。 -
使用
CssMinimizerPlugin压缩 CSS。 -
压缩图片,将比较小的图片转为base64
-
-
提取公共代码(Code Deduplication):将多个文件中重复的代码提取到一个单独的文件中,避免重复打包相同的代码。
-
使用CDN:将比较大的依赖包放到CDN上,通过js引入项目
-
删除无用资源(Dead Code Elimination):使用
PurgeCSS等工具删除未使用的 CSS 规则。 -
按需加载第三方库:例如,使用
babel-plugin-import只加载库的部分功能,而不是整个库。
2. 加快打包速度
加快打包速度是为了提升开发效率,缩短构建和重构的时间。常见的加速构建的优化策略包括:
-
缓存(Caching):通过使用缓存,避免每次都重新构建相同的内容,减少重复的构建时间。Webpack 提供了内建的构建缓存功能,通过配置
cache来保存中间结果。 -
并行构建(Parallelism):通过并行化处理多个构建任务来加速构建。例如,
parallel-webpack插件可以启用多个构建进程并行执行。 -
增加构建并发性:使用
thread-loader、happy-pack等工具来将构建任务分配到多个线程,提升构建效率。 -
使用
HardSourceWebpackPlugin:通过存储模块构建的中间结果,下次构建时直接复用,从而加快速度。 -
优化
devtool配置:在开发模式下,选择合适的 source map 类型。通常eval-source-map比较快速,但source-map会提供更详细的调试信息,适合生产环境。 -
构建监视(Watch Mode):在开发过程中开启
watch模式,避免每次修改都进行完全重新构建。Webpack 会监听文件变化,仅构建发生变化的部分。 -
热模块替换(HMR):通过模块热替换(HMR),仅更新修改的部分,而不是重新加载整个页面,提升开发效率。
总结
-
减少打包体积:主要关注如何减小生成的文件大小,减少网络传输时间,提升应用加载性能。
-
加快打包速度:主要关注如何优化构建过程,提高开发时的构建效率,缩短构建和重构的时间。
这两类优化常常是相辅相成的,在实践中很多优化策略会同时涉及到这两方面的提升。
相关文章:
webpack打包优化策略
1. 减少打包体积 减少打包文件的大小是为了提高加载速度,降低网络带宽消耗,提升用户体验。常见的减少打包体积的优化策略包括: 代码分割(Code Splitting):将代码拆分成多个小文件,让浏览器按需…...
Kafka日志数据深度解析:从基础查看到高级操作全攻略
#作者:孙德新 文章目录 查看log日志文件(kafka-dump-log.sh)1、查看Log文件基本数据信息2、index文件健康性检查(--index-sanity-check)3、转储文件(--max-message-size)4、偏移量解码(--offsets-decoder)5、日志数据解析(--transaction-log-decoder)6、查询Log文件…...
DeepSeek-R1使用生存指南
文章目录 1.为什么普通人一定要使用DeepSeek2.DeepSeek的几种使用方式2.1网页端直接使用2.2手机端app使用2.3其他第三方平台 3.网页端按钮的说明4.正确的提问技巧4.1不要定义过程4.2明确受众4.3记忆时间有限4.4输出长度限制4.5如何清除上下文的记忆 5.几个避坑点5.1冗长提示词污…...
Code::Blocks 创建 C 项目 二
Code::Blocks 创建 C 项目 二 Code::Blocks 安装请看 Code::Blocks 安装 启动 Code Blocks 选择 Create a new project 弹出界面选择 Projects -> Console application -> Go 选择 C :表示创建的是 C 语言项目 点击 Next Project title:项目名 …...
pyqt写一个待办程序
ToDoApp 框架选择 一个简单的GUI程序,可以使用pyqt完成。pyqt是qt的python实现版本。 界面搭建 设计一个美观 简洁的界面 class ToDoApp(QWidget):def __init__(self):super().__init__()# 设置窗口属性self.setWindowTitle("Daily To Do List")self…...
总结前端常用数据结构 之 数组篇【JavaScript -包含常用数组方法】
【亲爱的读者,爱博主记得一键三连噢噢ooo~~ 啾咪】 创建数组: 以字面量的形式创建新数组:let arr1 [1, 2, 3];通过 Array 构造函数并传入一组元素(4,5,6)来创建一个新数组:let arr2 new Array(4, 5, 6);…...
利率掉期(Interest Rate Swap):运作原理、收益模式及市场角色解析(中英双语)
利率掉期(Interest Rate Swap):运作原理、收益模式及市场角色解析 引言 利率掉期(Interest Rate Swap, IRS) 是金融市场中最常见的衍生品之一,它允许两方交换固定利率和浮动利率,以优化融资成…...
Mac 开发工具推荐
Homebrew 软件安装管理必备神器,相当于 Linux 上的 yum,安装了homebrew之后,以下软件都可以通过brew cask install 和 brew install进行直接安装 IntelliJ IDEA Java开发ide 相关插件: 1)lombok 2)Aliba…...
NCHAR_CS和CHAR_CS,导致UNION ALL 时,提示SQL 错误 [12704] [72000]: ORA-12704: 字符集不匹配
检查涉及的数据表和列的字符集设置 -- 查询表的字符集 SELECT parameter, value FROM nls_database_parameters WHERE parameter LIKE NLS_CHARACTERSET;-- 查询列的字符集(对于特定表) SELECT column_name, character_set_name FROM all_tab_columns W…...
使用 Python paramiko 自动备份设备配置实验
一、实验拓扑: 要求:交换机 SW1 做为 SSH 服务端,桥接本地虚拟虚拟网卡;本地主机通过 python paramiko 库功能登录到 SW1 上进行配置备份;AR1 做为测试 SW1 的 SSH 客户端 二、实验环境搭建: 1、SW1 配置…...
goland2022.3.3 安装过程
到csdn下载安装包 开始安装 安装完后,安装中文包...
工业级推荐系统冷启动解决方案:基于元迁移学习与动态知识图谱的混合架构设计与实践
技术原理与数学模型 1. 元学习冷启动适配器(MAML改进) 数学原理: \min_\theta \sum_{\mathcal{T}_i\sim p(\mathcal{T})} \mathcal{L}_{\mathcal{T}_i}(U_i(\theta - \alpha\nabla_\theta\mathcal{L}_{\mathcal{T}_i}^{sup}(\theta))))其中…...
小小小病毒(3)(~_~|)
一分耕耘一分收获 声明: 仅供损害电脑,不得用于非法。损坏电脑,作者一律不负责。此作为作者原创,转载请经过同意。 欢迎来到小小小病毒(3) 感谢大家的支持 还是那句话:上代码! …...
在 WSL上的 Ubuntu 中通过 Docker 来运行 Redis,并在微服务项目中使用redis
通过在 WSL(Windows Subsystem for Linux)上的 Ubuntu 虚拟机中通过 Docker 来运行 Redis,然后再微服务项目中使用redis 以下是步骤: 1. 安装 Docker(如果还未安装) 首先,确保你已经在 WSL 的…...
深入解析SVG图片原理:从基础到高级应用
文章目录 引言一、SVG基础概念1.1 什么是SVG?1.2 SVG的优势 二、SVG的基本结构2.1 SVG文档结构2.2 常用SVG元素 三、SVG的工作原理3.1 坐标系与变换3.2 路径与曲线3.3 渐变与滤镜 四、SVG的高级应用4.1 动画与交互4.2 数据可视化4.3 响应式设计 五、SVG的优化与性能…...
Python 中的一种调试工具 assert
assert 是 Python 中的一种调试工具,用于在代码中设置断言(assertion)。断言是一种声明,用于确保某个条件为真。如果条件为假,assert 会触发一个 AssertionError 异常,并可选地输出错误信息。 语法 asser…...
面基Spring Boot项目中实用注解一
在Spring Boot项目中,实用注解根据功能可以分为多个类别。以下是常见的注解分类、示例说明及对比分析: 1. 核心配置注解 SpringBootApplication 作用:标记主启动类,组合了Configuration、EnableAutoConfiguration和ComponentScan…...
【数据库维护】Clickhouse数据库维护关键系统表相关指标说明,支撑定位慢SQL及多实例场景下分析各实例运行情况
背景 当前使用环境上以Docker容器化部署Clickhouse服务8个实例,但在实际运行过程中,发现8个实例内存负载不均衡,ck-0实例在固定时间段内存会直线上升,直至服务报错memory exceeded max memory limit。 为排查ck-0节点内存直线上升…...
委托构造函数与继承构造函数
委托构造函数 允许同一类中的构造函数调用另一个构造函数,以复用初始化逻辑。 委托构造函数不能同时初始化成员变量,只能委托给其他构造函数。 避免循环委托(如构造函数A委托给B,B又委托给A)。 class MyClass { pu…...
DeepSeek操作Excel,实现图表自动化生成
案例 让DeepSeek操作Excel,实现图表自动化生成。我们只要用自然语言输入我们的需求(根据哪块单元格区域做什么图表),就可以直接在Excel中自动生成图表。 操作主界面和图表效果 设置接入方式 这里提供了多种接入方式将DeepSeek接…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存:一级缓存、二级缓存 默认情况下,只有一级缓存开启(sqlSession级别的缓存)二级缓存需要手动开启配置,需要局域namespace级别的缓存 一级缓存(本地缓存&#…...
Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...
