前端 -- uni-app 的 splitChunks 分包详解与实战！
全文目录：
- 开篇语
- 📝 前言
- 📖 目录
- 🌟 什么是 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'