当前位置：首页 > news >正文

前端 -- uni-app 的 splitChunks 分包详解与实战！

news 来源：原创 2025/8/25 23:39:40

全文目录：

- 开篇语
- 📝 前言
- 📖 目录
- 🌟 什么是 splitChunks？
- 🛠 splitChunks 的核心原理
- - 📂 文件拆分的机制
  - ⚙️ 配置选项
- ✨ splitChunks 实战案例
- - 1️⃣ 项目初始化
  - 2️⃣ 编写页面逻辑
  - 3️⃣ 配置 splitChunks
  - 4️⃣ 查看效果
- 🧩 splitChunks 的高级用法与优化
- - 🔍 优化一：动态加载模块
  - 🚀 优化二：控制文件大小
  - 🧰 优化三：缓存提升
- 🏁 总结与常见问题
- - 🤔 为什么要用 splitChunks？
  - 🛠 常见问题
- ✨ 最后的话
- 文末

开篇语

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛

今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

📝 前言

前端开发的小伙伴们，是不是经常被“大文件体积”压得喘不过气？尤其是做小程序开发的时候，直接被代码包大小限制卡得怀疑人生。没错，小程序的 2MB 限制真的让人痛彻心扉，难道我们的页面逻辑和功能就不配有点“分量”吗？

别急！uni-app 给了我们一个神奇的技能——splitChunks 分包。它不仅能让我们的代码“瘦身”，还可以让加载性能飞速提升。这篇文章就带你搞懂 splitChunks 的核心逻辑，并通过实战案例，让你轻松掌握这个利器。

📖 目录

🌟 什么是 splitChunks？
🛠 splitChunks 的核心原理
✨ splitChunks 实战案例
🧩 splitChunks 的高级用法与优化
🏁 总结与常见问题

🌟 什么是 splitChunks？

在 uni-app 的开发中，splitChunks 就像是一个神奇的分割器。它能够自动识别我们代码中的公共模块、第三方依赖等内容，并将它们拆分成独立的小文件。

这么做有啥好处呢？简单说，就是：

减少主包的体积，让小程序加载更快；
优化代码复用率，避免重复加载；
避免突破小程序的体积限制。

换句话说，splitChunks 是我们应对“包太大、加载慢”的救星！

🛠 splitChunks 的核心原理

📂 文件拆分的机制

在 uni-app 中，splitChunks 会根据以下规则自动进行文件拆分：

公共模块：提取多次使用的公共代码；
第三方库：比如 lodash、axios 等，会被单独打包；
按需加载：针对动态导入的模块，生成独立的文件。

默认情况下，splitChunks 会将公共模块和第三方依赖提取到 common 和 uni_modules 目录下。

⚙️ 配置选项

想要自定义拆分逻辑，可以在 vue.config.js 中进行配置：

module.exports = {configureWebpack: {optimization: {splitChunks: {chunks: 'all'

前端 -- uni-app 的 splitChunks 分包详解与实战！

全文目录：开篇语📝 前言📖 目录🌟 什么是 splitChunks？🛠 splitChunks 的核心原理📂 文件拆分的机制⚙️ 配置选项✨ splitChunks 实战案例1️⃣ 项目初始化2️⃣ 编写页面逻辑3️⃣ 配置 splitChunks4️⃣ 查看效果🧩 splitChunks 的高级用法与优化🔍 优化一…...

编程日记 2025/8/25 23:39:40

【教程】检查RDMA网卡状态和测试带宽 | 附测试脚本

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 目录检查硬件和驱动状态测试RDMA通信报错修复对于交换机的配置，可以看这篇： 【教程】详解配置多台主机通过交换机实现互…...

编程日记 2025/8/25 23:39:39

OSPF的拓展配置

OSPF的拓展配置 1，ospf的手工认证 1，接口认证 r1: display ospf peer brief （查看邻居关系） int g 0/0/0 ospf authentication-mode md5 1 cipher 123456 display this r2: ospf authentication-mode md5 1 plain 12345…...

编程日记 2025/8/25 5:43:42

http、https、TLS、证书原理理解，对称加密到非对称加密问题，以及对应的大致流程

http 超文本传输协议存在问题： 安全性、隐私性、数据完整性易被中间人（黑客之类的）对数据进行劫持、篡改、隐私泄露引出了 https （source） http 在网络模型中的应用层 Application > transport > inter…...

编程日记 2025/8/25 22:31:28

vscode格式化为什么失效？自动保存和格式化（Prettier - Code formatter，vue-format）

vscode自动格式化保存最终配置博主找了好多的插件，也跟着教程配置了很多，结果还是没有办法格式化，最终发现了一个隐藏的小齿轮，配置完后就生效了关键步骤关键配置一定要点小齿轮！！！ 这个小…...

编程日记 2025/8/25 23:35:28

两类中断控制器处理流程_链式和层级

今天呢，我们来用一种新的视角去看中断子系统，然后仿照人家的方法去写一个虚拟的中断子系统，我们先来讲讲链式和层级： 链式中断控制器(chained)： 上图中，左边的"chained intc"就是链式中断控制器…...

编程日记 2025/8/20 1:51:42

软件测试之接口测试用例设计

1.接口测试用例设计简介我们对系统的需求分析完成之后，即可设计对应的接口测试用例，然后用接口测试用例进行接口测试。接口测试用例的设计也需要用到黑盒测试方法，其与功能测试用例设计的方法类似，接口测试用例设计中还需要增加…...

编程日记 2025/8/23 13:26:23

猫咪如厕检测与分类识别系统系列【九】视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【上】

前情提要家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如…...

编程日记 2025/8/25 23:39:39

MySQL-运维篇

日志主从复制分库分表读写分离日志在任何一种数据库当中都会有各种各样的日志，这些日志记录着数据库运行的各个方面错误日志这个命令可以查看文件尾部的50行日志👆 这个命令是实时输出👆 二进制日志第三个是索引文件，里面…...

编程日记 2025/8/25 4:25:00

mysql关联查询语句

假设存在以下三张表： orders 表：记录订单信息，包含 order_id（订单编号）、customer_id（客户编号）、order_date（订单日期）等字段。customers 表：记录客户信息&…...

编程日记 2025/8/25 18:27:54

Uniapp权限申请优化方案

获取权限前给用户提示，并在用户拒绝后48小时内不再弹窗请求授权。优化方案分析您的代码已经实现了基本的权限申请逻辑，但可以进一步优化以满足应用商店的审核要求。 1. 权限申请前的用户提示优化当前代码中已经包含了权限申请前的提示功能&#x…...

编程日记 2025/8/25 23:38:49

案例驱动的 IT 团队管理：创新与突破之路：第四章危机应对：从风险预见到创新破局-4.2 人才流失危机-4.2.3梯队建设的“洋葱模型“

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲梯队建设的"洋葱模型"：破解IT团队人才流失危机的创新实践1. 人才流失危机的现实挑战1.1 行业现状与数据警示1.2 传统应对策略的失效 2. 洋葱模型的理论…...

编程日记 2025/8/17 20:21:40

双目视觉中矩阵等参数说明及矫正

以下是标定文件中各个参数的详细解释： 1. 图像尺寸 (imageSize) 参数值: [1280, 1024]含义: 相机的图像分辨率，宽度为1280像素，高度为1024像素。 2. 相机内参矩阵 (leftCameraMatrix / rightCameraMatrix) 结构: yaml data: [fx, 0, cx, 0,…...

编程日记 2025/8/25 23:35:30

烽火ai场控接入deepseek自动回复话术软件

要将烽火AI场控软件与DeepSeek自动回复话术软件进行对接，实现直播间自动互动功能，需通过API接口或脚本工具完成数据互通。以下是具体操作步骤及注意事项： 确认兼容性与准备工作软件支持检查确认烽火AI场控是否开放API接口（一般需…...

编程日记 2025/8/25 22:22:52

CSS 美化页面（三）

一、盒模型盒模型本质上是一个盒子，封装周围的HTML元素。包含： 外边距，边框，填充，和实际内容一个盒子由四个区域组成：内容（Content）、内边距（Padding）、外…...

编程日记 2025/8/25 23:34:44

面试题之数据库-mysql高阶及业务场景设计

最近开始面试了，410面试了一家公司针对自己薄弱的面试题库，深入了解下，也应付下面试。在这里先祝愿大家在现有公司好好沉淀，定位好自己的目标，在自己的领域上发光发热，在自己想要的领域上（技术…...

编程日记 2025/8/25 0:47:33

STM32F407实现SD卡的读写功能

文章目录前言一、SDIO简介二、SD卡操作1.读操作2.写数据3.擦除操作4.最终效果5.完整工程前言在STM32中存储空间是有限的，对于需要存储大量数据的项目就需要外扩存储空间，一般会选择FLASH、EEPROM或者SD卡。SD是这三种中可达空间最大的，所…...

编程日记 2025/8/25 23:38:48

Vue 3中的setup【与Vue 2的区别】

一、前言在Vue 3中，setup是组合式API（Composition API）的核心入口函数。其核心作用是为组件提供灵活的逻辑组织方式，解决复杂组件中逻辑碎片化的问题。二、核心作用 1.初始化响应式数据通过ref和reactive等API声明响应式状态…...

编程日记 2025/8/25 23:33:58

基于PySide6的YOLOv8/11目标检测GUI界面——智能安全帽检测系统

📖 前言在工业安全领域，智能安全帽检测是保障工人生命安全的重要技术手段。本文将介绍如何利用YOLOv8/YOLOv11目标检测算法与PySide6 GUI框架，开发一套功能完整的智能安全帽检测系统。系统支持： 动态切换检测模型（Y…...

编程日记 2025/8/25 23:34:45

AF3 generate_chain_data_cache脚本解读

AlphaFold3 generate_chain_data_cache 脚本在源代码的scripts文件夹下。该脚本从指定目录中批量解析 mmCIF/PDB 文件的工具，并将每个链的基本信息（序列、分辨率、是否属于聚类等）提取并写入 JSON 文件，主要用于后续蛋白质建模、过滤或训练数据准备。源代码： import ar…...

编程日记 2025/8/25 23:38:11

C/C++不透明指针

今天在ESP32编程中又看到了这个词，这个词出现在cursor回答中。回答如下： struct esp_netif_obj; typedef struct esp_netif_obj esp_netif_t;esp_netif_obj的具体实现细节被隐藏了用户代码只能通过esp_netif_t类型指针来操作网络接口这种封装方式被称为…...

编程日记 2025/8/25 23:33:56

电力实习中需要注意哪些安全用电问题

电力实习中需要注意哪些安全用电问题在电工实习中，由于涉及到电力设备和电气设施，安全问题尤为重要。以下是电工实习中需要注意的安全问题： 一、电气设备及线路安全使用电气设备前，应确保设备具有良好的电气绝缘&#xff0c…...

编程日记 2025/8/25 9:17:49

【版本控制】git命令使用大全

大家好，我是jstart千语。今天来总结一下git的使用命令，上文会先将git命令都列出来，便于快速寻找，然后还会对部分常用命令图文讲解，适合新手，让你快速地理解。最后还会总结在idea中使用git。如果有缺失的&am…...

编程日记 2025/8/21 1:06:15

Day09【基于Tripletloss实现的简单意图识别对话系统】

基于Tripletloss实现的表示型文本匹配目标数据准备参数配置数据处理Triplet Loss目标Triplet Loss计算公式公式说明模型构建网络结构设计网络训练目标损失函数设计主程序推理预测类初始化加载问答知识库文本向量化知识库查询主程序main测试测试效果参考博客目标在此之前…...

编程日记 2025/8/24 22:21:02

什么是HIGG验厂，HIGG验厂有什么要求？HIGG验厂有什么作用

什么是Higg验厂？ Higg验厂（Higg Facility Environmental Module, FEM & Higg Facility Social & Labor Module, FSLM）是由可持续服装联盟（SAC, Sustainable Apparel Coalition）开发的一套评估工具&#xff0c…...

编程日记 2025/8/25 23:38:48

SmolVLM新模型技术解读笔记

原文地址：https://huggingface.co/blog/zh/smolervlm 一、核心发布概要新成员亮相：推出256M（2.56亿参数）与500M（5亿参数）视觉语言模型关键定位：目前全球最小VLM（256M）…...

编程日记 2025/8/25 23:33:59

解决USG5150防火墙web无法连接问题

参考防火墙usg5500（V300R001C00SPC700）WEB界面无法登陆现象 Web防火墙突然无法web登录，Ping通，但是Tcpping端口不通。无论是从外网、还是内网都一样。 Probing 192.168.100.1:1234/tcp - No response - time2047.528ms Prob…...

编程日记 2025/8/25 23:33:58

Resilience4j与Spring Cloud Gateway整合指南：构建弹性的API网关

什么是Resilience4j？ Resilience4j是一个轻量级的容错库，专为Java 8和函数式编程设计。它借鉴了Netflix Hystrix的设计理念，但更加轻量且专注于Java 8的函数式编程风格。Resilience4j提供了多种容错机制，帮助开发者构建弹性强健的…...

编程日记 2025/8/21 1:31:43

Quipus，LightRag的Go版本的实现

1 项目简介奇谱系统当前版本以知识库为核心，基于知识库可以快构建自己的问答系统。知识库的Rag模块的构建算法是参考了LightRag的算法流程的Go版本优化实现，它可以帮助你快速、准确地构建自己的知识库，搭建属于自己的AI智能助手。与当前LLM…...

编程日记 2025/8/25 23:35:29

怎样完成本地模型知识库检索问答RAG

怎样完成本地模型知识库检索问答RAG 目录怎样完成本地模型知识库检索问答RAG使用密集检索器和系数检索器混合方式完成知识库相似检索1. 导入必要的库2. 加载文档3. 文本分割4. 初始化嵌入模型5. 创建向量数据库6. 初始化大语言模型7. 构建问答链8. 提出问题并检索相关文档9. 合…...

编程日记 2025/8/25 23:32:37

研发效率破局之道阅读总结(2)流程优化

研发效率破局之道阅读总结(2)流程优化 Author: Once Day Date: 2025年4月15日一位热衷于Linux学习和开发的菜鸟，试图谱写一场冒险之旅，也许终点只是一场白日梦… 漫漫长路，有人对你微笑过嘛… 全系列文章可参考专栏: 程序的艺术_Once-Day…...

编程日记 2025/8/22 10:03:37

解决PIP 安装出错ERROR: cp310-cp310-manylinux_2_28_x86_64.whl is not a supported wheel

ERROR: torch-2.8.0.dev20250325cu128-cp310-cp310-manylinux_2_28_x86_64.whl is not a supported wheel on this platform. 可以 pip debug --verbose | grep manylinux | grep cp310 WARNING: This command is only meant for debugging. Do not use this with automation f…...

编程日记 2025/8/25 10:19:20