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

全文目录：

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

开篇语

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

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

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

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

📝 前言

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

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

📖 目录

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

🌟 什么是 splitChunks？

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

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

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

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

🛠 splitChunks 的核心原理

📂 文件拆分的机制

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

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

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

⚙️ 配置选项

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

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