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

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

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

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

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

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

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

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

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

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

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

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

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

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

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